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

Workers异步任务

开始（注册）：

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

任务文件（dong.js）:

var conutx =0;
function confun(){
    postMessage(conutx);//发送消息
    conutx++;
    setTimeout(confun,1000);//递归调用
}
confun();

停止任务：

if(workdong){
    workdong.terminate();
    workdong=null;
}

获取服务器实时数据

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

客户端：

divobjx=document.getElementsByTagName("div")[0];
divobjx1=document.getElementsByTagName("div")[1];
//异步任务开始
var  ev=new EventSource("dong.php");
ev.onopen=function(e){
    divobjx1.innerHTML="链接打开中";
}

//获取数据方法一
//ev.onmessage=function(e){
//    var resx=e.data;//得到数据
//    divobjx.innerHTML=resx;//数据显示
//}

//获取数据方法二
ev.addEventListener("newdong",function(e){
    divobjx.innerHTML=e.data;
});
ev.onerror=function(e){
    divobjx1.innerHTML="链接错误或当次执行完毕";
}

服务器：

<?php
header('Content-Type: text/event-stream');
for($i=0;$i<5;$i++){
    //事件名，如果使用方法一进行数据获取，则必须省略此句
    echo "event:newdong
";
    //数据
    echo "data:dongxioadong东东".$i."

";
    //刷新，实现逐条发送
    ob_flush();
    flush();
    sleep(1);
}
?>

---