分类： 系统运维
2012-11-30 09:21:46
[说明：本文参考了张亚飞 著 JavaScript 权威指南]
HTML5 规范定义了Server-Sent Event 和WebSocket，为浏览器变成一个RIA客户端平台提供了强大的支持，使用这两个特性，可以帮助服务器将数据“推送”到客户端浏览器。
其中，Server-Sent Event是一个从服务器到浏览器的单向推送。Web Socket可以试想双向的通信。下表列出主流的浏览器目前对这两个技术的支持情况：
IE | Firefox | Opera | Safari | Chnme | |
Server-Sent Evet | NO | NO | NO | 5.0+ | 5.0+ |
Web Socket | NO | 4.0+ | NO | 5.0+ | 4.0+ |
HTML5服务器推送技术是使用事件来实现的，英文全称是Server-Sent Event,客户端使用
EventSource对象实现，服务端也有相应的要求，下面让我一一道来：
前戏闲话都省略，咱们直接上代码：
第一步：首先在自己的web目录创建一个serversent.html的页面（我的目录为localhost/eventserver/serversent.html）
代码：
第二步：创建一个名为eventserver.php的PHP文件作为服务器端
代码：
error_reporting(E_ALL);
//注意： 发送包头定义MIMIE类型（header部分），是你实现服务器推必须的代码（MIMIE类型定义了事件框架格式）
header("Content-Type:text/event-stream");
//注意：输出的格式必须为data:value格式，不要问什么，是text/event-tream格式规定。
echo 'data:我是服务器端得第一条数据'."\n";
echo 'data:我是服务器端得第二条数据'."\n";
?>
再注意一下：Server-Sent Event通信数据的编码怎是UTF-8格式的，也就是说你所有的页面编码要统一为UTF-8，否则会乱码或无数据。
现在大家已经可以清楚的看到，服务器每隔一段时间推送一个此数据；那么我们在详细说明一下EventSource对象中的几个时间监听函数。
当EventSource对象被创建，就已可以定义事件监听函数来处理各种事件，主要有以下3个事件：
1，open事件：当连接打开时触发改事件
2，message事件：当收到信息时出发该时间。
3，close事件：当连接关闭时触发改事件。
在事件处理函数中，也可以通过使用readyState属性检测连接状态，主要有3中状态，如下表：
常量 | 值 | 描述 |
CONNECTING | 0 | 正在建立连接 |
OPEN | 1 | 连接已经建立，正在委派事件 |
CLOSED | 2 | 连接已经关闭 |
大家看到了EventSource对象是一个不间歇运行的程序，时间一长会大量的耗资源，甚至导致客户端浏览器崩溃，那么如何优化这段执行代码呢？
在HTML5中使用WebWorkers 优化JavaScript 执行复杂运算、重复运算和多线程；对于执行时间长、消耗内存多的JavaScript程序代码最为有用。
下面咱们就说说这个Web Workers,下面先了解一下各个浏览器对Web Workers的支持情况，
IE | Firefox | Opera | Safari | Chrome | |
Workers | NO | 3.5 | 10.6 | 5.0 | 3.0 |
SharedWorker | NO | NO | 10.6 | 5.0 | 5.0 |
同时也可以是有代码去判断当前浏览器是否支持Web Workers
If(window.Worker){
Alert(‘支持 Worker’);
}else{
Alert(‘不支持 Worker’);
}
If(window.SharedWorker){
//支持SharedWorker
}else{
//不支持SharedWorker
}
要注意：JavaScript代码的大小写问题哦。
上面还提到了SharedWorker，它称为共享Worker，该对象一点被创建，运行在同一个源的任何一个脚本都可以引用Worker,并能和他通信。
下面我们就用代码示例演示如何使用Worker和EventSource对象实现单向服务器推
第一步、首先建立一个JS文件命名为worker.js:
function messageHandler(evt){
var url="";
//声明一个EventSource:source;
var source;
if(evt.data){
try{
source=new EventSource(url);
source.onopen=function(event){
postMessage("连接已经建立，状态号："+this.readyState);
}
source.onmessage=function(event){
postMessage('客户端收到服务器推送的数据是：'+event.data);
}
source.onerro=function(event){
postMessage("出错，信息状态号是："+this.readyState);
}
}catch(err){
postMessage('出错啦，错误信息：'+err.message);
}
}else{
postMessage('已经退出！');
source.close();
source=null;
}
}
self.addEventListener('message',messageHandler,false);
第二步，创建一个worker.html页面
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
下一次我们将探讨：套接字连接Web Socket可以使客户端Web应用程序与服务端进程实现双向通信，敬请期待。
原文地址：
