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 ?>