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

前端开发 作者: 2024-08-20 03:25:02
Workers异步任务 开始(注册): 任务文件(dong.js): 停止任务: 获取服务器实时数据 客户端实现EventSource,定时访问(一般在2-3秒频率)服务器以刷新页面,每次访问会执行完
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 }
1 var conutx =0;
 confun(){
3     postMessage(conutx);发送消息
4     conutx++5     setTimeout(confun,1000);递归调用
6 }
7 confun();
if(workdong){
    workdong.terminate();
3     workdong=null4 }
 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 ?>

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65296.html