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/perlprint "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():终止任何现有连接

看个栗子：

//scriptfunction 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应用程序刷新数据，不需要用户做任何动作。

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