web前端异步数据交互(长连接)

前端之家收集整理的这篇文章主要介绍了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;
 confun(){
3     postMessage(conutx);发送消息
4     conutx++5     setTimeout(confun,1000);递归调用
6 }
7 confun();

停止任务:

if(workdong){
    workdong.terminate();
3     workdong=null4 }

获取服务器实时数据

客户端实现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=(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",17     divobjx.innerHTML=e.data;
18 });
19 ev.onerror=20     divobjx1.innerHTML="链接错误或当次执行完毕"21 }

服务器:

 1 <?PHP
 2 header('Content-Type: text/event-stream'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     flush11     sleep(113 ?>

 

猜你在找的JavaScript相关文章