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\n";
//数据
echo "data:dongxioadong东东".$i."\n\n";
//刷新,实现逐条发送
ob_flush();
flush();
sleep(1);
}
?>

web前端异步数据交互(长连接)的更多相关文章

  1. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  2. 当web应用包含了websocket长连接,如何在web应用前加一层nginx转发

    1 通过在web应用的前面加一层nginx ,可以实现一台主机部署多个应用,每个应用都可以用不同的域名去访问,并且端口都是80 2 nignx 转发websocket长连接 1 每个web应用,他们运 ...

  3. spring controller获取web前端post数据乱码解决

    web.xml文件加上如下代码<!-- post请求乱码拦截器 --><filter> <filter-name>CharacterEncodingFilter&l ...

  4. web实现数据交互的几种常见方式

    前言 在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...

  5. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  6. web服务器长连接

    web服务器都提供长连接的方式,所谓长连接就是客户端一次请求完后,不关闭连接,保持一段时间的连接,下次此客户端再次请求时,不用创建新连接,复用所保持的连接即可.从理论上,长连接可以免去大量建立和关闭连 ...

  7. web前端基础学习路线

    1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...

  8. HTTP的长连接和短连接——Node上的测试

        本文主要从实践角度介绍长.短连接在TCP层面的表现,借助Node.JS搭建后台服务,使用WinHTTP.Ajax做客户端请求测试,最后简单涉及WebSocket.     关键字:长连接.短连 ...

  9. TCP长连接与短连接、心跳机制

    1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次 ...

随机推荐

  1. Django使用cropbox包来上传裁剪图片

    1.使用cropbox包来上传裁剪图片,可见介绍:https://www.jianshu.com/p/6c269f0b48c0I ImgCrop包包括:css--style.css,js--cropb ...

  2. React Native不同设备分辨率适配和设计稿尺寸单位px的适配

    React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢? 官方提供了PixelRat ...

  3. echarts使用踩坑实录之气泡图

    最近想做一个统计文章点击率,评论率和点赞率的功能,听说echarts可以轻易完成它,于是我就选择使用echarts,考虑到我做的模块上文章是没有分类的,所以我的统计是基于一个个点,这一看嘛,感觉散点图 ...

  4. OpenGL ES中MRT应用

    Demo涵盖了OpenGL ES 3.0 的一系列新特性: 1.VAO和VBO 2.帧缓冲对象 3.MRT 效果: 代码: //yf's version #define STB_IMAGE_IMPLE ...

  5. 自定义react-navigation的TabBar

    在某些情况下,默认的react-navigation的tab bar无法满足开发者的要求.这个时候就需要自定义一个tab bar了.本文就基于react-navigtion v2来演示如何实现一个自定 ...

  6. 计算机网络六:无线局域网、IEEE 802.11、WIFI和蓝牙

    无线局域网.IEEE 802.11.WIFI和蓝牙 ㈠无线局域网 1.定义       无线局域网络(Wireless Local Area Networks),简称WLAN.它是相当便利的数据传输系 ...

  7. 记一次bash脚本开发的经历

    现状描述与需求描述 最近梳理系统功能的时候发现现在每个月处理完数据之后,需要给别的系统传送批接口文件,接口文件的内容是来自于Oracle数据表中的数据.我每次都需要手工执行一下存储过程,让数据从正式表 ...

  8. 一招让 IOS 自动化化快的飞起

    前言 最近在做IOS自动化测试,IOS的Appium环境都配置OK,Demo脚本运行没有问题,多开执行没有问题,IOS安卓统一平台调度集成没有问题,可以进行自动化测试.课时真正执行用例时发现个严重问题 ...

  9. Python 递归 Resursion()

    条件: ①递归有最小值或有确定值 ②fun(x) = ax * bfun(x-1) 类似规则 eg.   n! : ①1! = 1 ②n! = n* (n-1)! def factorial (n): ...

  10. SQL Server 存储过程的运用

    概述 最近因为业务的需求写了一段时间存储过程,发现之前写的存储过程存在一些不严谨的地方,特别是TRY...CATCH中嵌套事务的写法:虽然之前写的并没有错,但是还是埋藏着很大的隐患在里面.希望这篇文章 ...