web前端异步数据交互（长连接）

Workers异步任务

开始（注册）：

1 divobjx=document.getElementsByTagName("div")[0];
2 var workdong=new Worker("dong.js");//创建work对象
3 workdong.onmessage=function(ee){
4     var resx=ee.data;//得到数据
5     divobjx.innerHTML=resx;//数据显示
6 }

任务文件（dong.js）:

1 var conutx =0;
2 function confun(){
3     postMessage(conutx);//发送消息
4     conutx++;
5     setTimeout(confun,1000);//递归调用
6 }
7 confun();

停止任务：

1 if(workdong){
2     workdong.terminate();
3     workdong=null;
4 }

获取服务器实时数据

客户端实现EventSource，定时访问（一般在2-3秒频率）服务器以刷新页面，每次访问会执行完服务器脚本的所有内容，服务器可以使用ob_flush();flush();进行一次访问数据的多条分别输出。

客户端：

 1 divobjx=document.getElementsByTagName("div")[0];
 2 divobjx1=document.getElementsByTagName("div")[1];
 3 //异步任务开始
 4 var  ev=new EventSource("dong.php");
 5 ev.onopen=function(e){
 6     divobjx1.innerHTML="链接打开中";
 7 }
 8 
 9 //获取数据方法一
10 //ev.onmessage=function(e){
11 //    var resx=e.data;//得到数据
12 //    divobjx.innerHTML=resx;//数据显示
13 //}
14 
15 //获取数据方法二
16 ev.addEventListener("newdong",function(e){
17     divobjx.innerHTML=e.data;
18 });
19 ev.onerror=function(e){
20     divobjx1.innerHTML="链接错误或当次执行完毕";
21 }

服务器：

 1 php
 2 header('Content-Type: text/event-stream');
 3 for($i=0;$i<5;$i++){
 4     //事件名，如果使用方法一进行数据获取，则必须省略此句
 5     echo "event:newdong\n";
 6     //数据
 7     echo "data:dongxioadong东东".$i."\n\n";
 8     //刷新，实现逐条发送
 9     ob_flush();
10     flush();
11     sleep(1);
12 }
13 ?>

---