testWorker.js文件:
| var i=0; function timedCount() { i+=1; // 重要的部分,向html页面传回一段信息 postMessage(i); setTimeout('timedCount()',500); } timedCount(); |
注意1:通常web worker不是用于如此简单的任务,而是用在更耗CPU资源的任务!
注意2:在chrome中运行会产生“cannot be accessed from origin 'null'”的错误,我的解决方法是:xampp中开启apache,用http://localhost/进行访问。
web worker缺点:
由于web worker位于外部文件中,所以它无法访问下列javascript对象:
-
window对象;
document对象;
parent对象。
HTML5 server-sent events(服务器发送事件):
server-sent事件是单向信息传递;网页可以自动获取来自服务器的更新!
以前:网页先询问是否有可用的更新,服务器发送数据,进行更新(双向数据传递)!
支持情况:除IE以外的现代浏览器均支持!
示例代码:html文件:
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sever sent event</title> </head> <body> <p>sever sent event informations</p> <div id="test"></div> <script> // 判断浏览器是否支持EventSource if(typeof(EventSource)!==undefined){ // 创建EventSource对象 var source=new EventSource("test.php"); // 事件监听 source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+"<br>"; }; }else{ document.getElementById('test').innerHTML="sorry,浏览器不支持server sent event"; } </script> </body> </html> |
test.php:
| <?php header('Content-Type:text/event-stream'); header('Cache-Control:no-cache'); $time=date('r'); echo "data:The server time is: {$time} nn"; // 刷新输出数据 flush(); |
注意:后面没有内容,php文件可以不用"?>"关闭!
HTML5 WebSocket:
-
WebSocket是HTML5提供的一种在单个TCP连接上建立全双工(类似电话)通讯的协议;
浏览器和服务器之间只需要进行一次握手的操作,浏览器和服务器之间就形成了一条快速通道,两者之间就可直接进行数据传送;
浏览器通过javascript建立WebSocket连接请求,通过send()向服务器发送数据,onmessage()接收服务器返回的数据。
WebSocket如何兼容低浏览器:
-
Adobe Flash Socket;
ActiveX HTMLFile(IE);
基于multipart编码发送XHR;
基于长轮询的XHR









