2016-07-19

HTML5 Server-Sent Event+php实现服务器推送

说明：本文参考了张亚飞著 JavaScript 权威指南
HTML5 规范定义了Server-Sent Event 和WebSocket，为浏览器变成一个RIA客户端平台提供了强大的支持，使用这两个特性，可以帮助服务器将数据“推送”到客户端浏览器。
其中，Server-Sent Event是一个从服务器到浏览器的单向推送。Web Socket可以试想双向的通信。下表列出主流的浏览器目前对这两个技术的支持情况：

	IE	Firefox	Opera	Safari	Chrome
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:我是服务器端得第一条数据'."\n\n";
    echo 'data:我是服务器端得第二条数据'."\n\n";
?>

注意：此处必须是“\n\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

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都是配置较高的，相对用互用来讲几乎没有任何影响。
这样就解决了：服务器连接数量的限制。
代码-eventserver.zip

转自：http://bbs.lampbrother.net/read.php?tid=149631&ds=1&page=1&toread=1#tpc
扩展：http://www.w3school.com.cn/html5/html_5_serversentevents.asp
扩展：阮一峰Server-Sent Events 教程