JavaScript数据推送

一、Comet:基于HTTP长连接的服务器推送技术

index.html代码如下：

<meta charset="utf-8">

<script type="text/javascript" src="http://apps.bding.com/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>测试</h1>

<script type="text/javascript">

      $ajax({

         url:'data.php',

           dataType:"json",

           success:function(data){

               console.log(data);

           }

      });

     //前端每隔一段时间发送一次请求

</script>

data.php代码如下：

<? php

header("Content-Type:application/json;charset=utf-8");

header("Cache-Control:max-age=0"); //不缓存

$i = 0;

while($i<9){

     $i++;

     $res = array('success' => "ok","text"=>"我是测试文本");

     echo json_encode($res);

     ob_flush();//不缓存

     flush();

}

?>

二、基于WebSocket的推送方案

socket.io

三、SSE(Server-Send Event):服务器推送数据的新方式

建立服务器端的sse项目：

data.php代码如下：

<? php

header("Content-Type:text/event-stream;charset=utf-8");

header("Access-Control-Allow-Origin:http://127.0.0.1/");

echo "data:现在北京时间是".date('H:i:s')."\r\n\r\n";

?>

index.js代码如下：

var source;

function init(argument){

     source = new EventSource('http://localhost/sse/data.php');

     source.onopen = function(){

          console.log("连接已建立",this.readyState);

     }

     source.onmessage = function(event){

          console.log("从服务器时时获取的数据"，event.data);

     }

     source.onerror = function(){

//     

     }

}

init();

index.html代码如下：

<meta charset="utf-8"/>

<script type="text/javascript" src="index.js"></script>