大诚说：HTML5 Server-Sent Event+php实现服务器推送
[说明：本文参考了张亚飞 著 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）
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="init()">
<button onClick="quit()">退出</button>
<div id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
<script type="text/javascript">
//声明一个EventSource:source;
var source;
//初始化调用方法
function init(){
var url="http://localhost/eventserver/index.php";
source=new EventSource(url);
try{
source.onopen=function(event){
p("连接已经建立，状态号："+this.readyState);
}
source.onmessage=function(event){
p('客户端收到服务器推送的数据是：'+event.data);
}
source.onerro=function(event){
p("出错，信息状态号是："+this.readyState);
}
}catch(err){
alert('出错啦，错误信息：'+err.message);
}
}
//退出方法，关闭EventSource
function quit(){
p("已经成功退出啦！");
source.close();
source=null;
}
//信息输出方法
function p(msg){
document.getElementById("msg").innerHTML+="<br/>"+msg;
}
</script>
第二步：创建一个名为eventserver.php的PHP文件作为服务器端
代码：
<?php
error_reporting(E_ALL);
//注意： 发送包头定义MIMIE类型（header部分），是你实现服务器推必须的代码（MIMIE类型定义了事件框架格式）
header("Content-Type:text/event-stream");
//注意：输出的格式必须为data:value格式，不要问什么，是text/event-tream格式规定。
echo 'data:我是服务器端得第一条数据'."
";
echo 'data:我是服务器端得第二条数据'."
";
?>
再注意一下：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="http://localhost/eventserver/index.php";
//声明一个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页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
//声明一个worker;
var worker;
//初始化调用方法
function init(){
if(window.Worker){
worker=new Worker('worker.js');
worker.onmessage=function(event){
p(event.data);
};
worker.postMessage(true);
}else{
alert("浏览器不支持Web Workers!");
}
}
//退出方法，关闭EventSource
function quit(){
p("已经成功退出啦！");
source.close();
source=null;
}
//信息输出方法
function p(msg){
document.getElementById("msg").innerHTML+="<br/>"+msg;
}
</script>
</head>
<body onload="init()">
<button onClick="quit()">退出</button>
<div id="msg" style="border:1px dashed #c3c3c3;"></div>
</body>
</html>
如果你看到了如下结果：恭喜你，成功了!
其实，worker的作用是把JS代码运行在客户端的系统线程中，速度非常快不会导致浏览器崩溃，况且目前的用户PC都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
下一次我们将探讨：套接字连接Web Socket可以使客户端Web应用程序与服务端进程实现双向通信，敬请期待。
原文地址：http://http://www.zjjv.com//mpbrother.net/read-htm-tid-149631.html
