HTML5--SSE 和 WebSocket

先粗略介绍一下两个东西吧
SSE（Server-Send event）服务器发送事件。
功能就是可以使网页自动的获取来自服务器的跟新。（以前是网页不得不询问是否有更新，轮询）
WebSocket新一代的双向通讯技术。
服务器能推送信息到客户端，客户端也能推送信息到服务器。
看起来WebSocket更全面一些，不过根据具体情况选择不同的。

---

SSE（Server-Send event）
他的基本原理是：eventSource对象的src属性指向一个URL，这个URL提供一个HTTP持久连接用于发送包含事件的数据流，一般以PHP PERL 或者Python写这样一个发送数据流的脚本。

eventSource对象在页面有两种写法：

<eventSource>标签形式

//html
<eventsource src="/cgi-bin/ticker.cgi">
<div id="ticker"></div>
//script
//获取eventsource对象，并添加监听事件，监听的是'server-time'这个事件（下面脚本有声明），并执行回调函数eventHandler();
document.getElementByTagName("eventsource")[0].addEventListener('server-time', eventHandler)
//函数将获得的数据添加到"#ticker"中
function eventHandler(event){
    document.querySelector('#ticker').innerHTML = event.data;
}

服务端脚本（perl编写）

#!/usr/bin/perl

print "Content-Type: text/event-stream\n\n";
while(true){
   print "Event: server-time\n";
   $time = localtime();
   print "Data: $time\n";
   sleep(5);
}

New EventSource 方式
获取eventsource对象的方式 是直接用JS new出来

//声明eventsource对象
var source = new EventSource('/cgi-bin/ticker.cgi');
//监听事件
source.addEventListener('server-time', eventHandler);
function eventHandler(){}
//或者(只要能监听事件就行)
source.onmessage = function(event){
    document.getElementById('ticker').innerHTML += evet.data + "<br/>"
}

EventSource对像事件
onopen:当融网服务器的链接被打开
onmessage:当接收到消息
onerror:当发生错误

---

WebSocket
与服务器上的Web Socket连接后，就可以通过调用send()方法从浏览器发送数据到服务器，通过onmessage事件处理程序从服务器接收数据到浏览器中。

创建一个新的 WebSocket 对象的 API

var Socket = new WebSocket(url, [protocal]);

第一个参数URL，第二个非必需参数，为端口号。

webSocket属性
Socket.readyState:表示连接的状态
0：表示连接尚未建立
1：连接已经建立，可以进行通信
2：连接正在进行关闭握手
3：连接已经关闭或者连接不能打开
Socket.bufferedAmount:表示已经使用 send() 方法排队的 URF-8 文本字节数。

webSocket事件
Socket.onopen:建立Socket连接时触发
Socket.onmessage:客户端从服务器接收数据时
Socket.onerror:发生错误时
Socket.onclose:连接关闭时

webSocket方法
Socket.send():send(data）使用连接传输数据
Socket.close():终止任何现有连接

看个栗子：

//script
function WebSocketTest(){
    //创建websocket对象
    var ws = new WebSocket("ws://localhost:9999/echo");
    //在连接时触发
    ws.onopen = function(){
        ws.send('a message to send')
    }
    //接收到数据时
    ws.onmessage = function(event){
        var received_msg = event.data;
        alert(received_msg)
    }
    //关闭连接时
    ws.onclose = function(){}
}

需要相应服务端配合，既 ws://localhost:9999/echo提供内容

数据拉与推的功能是一样的，用户拿到新数据。但数据推送有一些优势。 你可能听说过Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets与SSE是不同的技术。可能最大的优势是低延迟。SSE用于web应用程序刷新数据，不需要用户做任何动作。

注意：两个功能在使用之前确保当前浏览器支持