1.?
Server-Sent Events?服務器發(fā)送事件，一種新API，部署在EventSource對象上。目前，除了IE，其他主流瀏覽器都支持。
傳統的網頁：瀏覽器向服務器“查詢”數據
很多場合，最有效的方式是服務器向瀏覽器“發(fā)送”數據。
比如，每當收到新的電子郵件，服務器就向瀏覽器發(fā)送一個“通知”，這要比瀏覽器按時向服務器查詢（polling）更有效率。
2.?
瀏覽器向服務器發(fā)送一個HTTP請求，然后服務器不斷單向地向瀏覽器推送“信息”（message）。這種信息在格式上很簡單，就是“信息”加上前綴“data: ”，然后以“\n\n”結尾。
$ curl http://example.com/dates
data: 1394572346452
data: 1394572347457
data: 1394572348463
^C
3.??SSE與WebSocket
功能相似，均用于建立瀏覽器與服務器之間的通信渠道。
區(qū)別：
a.? WebSocket是全雙工通道，可以雙向通信，功能更強；
????SSE是單向通道，只能服務器向瀏覽器端發(fā)送。
b.????WebSocket是一個新的協議，需要服務器端支持；
????SSE部署在HTTP協議之上的，現有的服務器軟件都支持。
c.? SSE是一個輕量級協議，相對簡單；
????WebSocket是一種較重的協議，相對復雜。
d.? SSE默認支持斷線重連，WebSocket則需要額外部署。
e.? ?SSE支持自定義發(fā)送的數據類型。
4. 客戶端代碼部署
a. 首先，檢測瀏覽器是否支持SSE。
if(!!window.EventSource){// ...}
b. 然后，部署SSE大概如下。
varsource=newEventSource('/dates');source.onmessage=function(e){console.log(e.data);};// 或者source.addEventListener('message',function(e){})
c. 建立連接
首先，瀏覽器向服務器發(fā)起連接，生成一個EventSource的實例對象。
varsource=newEventSource(url);
參數url就是服務器網址，必須與當前網頁的網址在同一個網域（domain），而且協議和端口都必須相同。
下面是一個建立連接的實例。
if(!!window.EventSource){varsource=newEventSource('http://127.0.0.1/sses/');}
新生成的EventSource實例對象，有一個readyState屬性，表明連接所處的狀態(tài)。
source.readyState
它可以取以下值：
0，相當于常量EventSource.CONNECTING，表示連接還未建立，或者連接斷線。
1，相當于常量EventSource.OPEN，表示連接已經建立，可以接受數據。
2，相當于常量EventSource.CLOSED，表示連接已斷，且不會重連。
open事件
連接一旦建立，就會觸發(fā)open事件，可以定義相應的回調函數。
source.onopen=function(event){// handle open event};// 或者source.addEventListener("open",function(event){// handle open event},false);
message事件
收到數據就會觸發(fā)message事件。
source.onmessage=function(event){vardata=event.data;varorigin=event.origin;varlastEventId=event.lastEventId;// handle message};// 或者source.addEventListener("message",function(event){vardata=event.data;varorigin=event.origin;varlastEventId=event.lastEventId;// handle message},false);
參數對象event有如下屬性：
data：服務器端傳回的數據（文本格式）。
origin： 服務器端URL的域名部分，即協議、域名和端口。
lastEventId：數據的編號，由服務器端發(fā)送。如果沒有編號，這個屬性為空。
error事件
如果發(fā)生通信錯誤（比如連接中斷），就會觸發(fā)error事件。
source.onerror=function(event){// handle error event};// 或者source.addEventListener("error",function(event){// handle error event},false);
自定義事件
服務器可以與瀏覽器約定自定義事件。這種情況下，發(fā)送回來的數據不會觸發(fā)message事件。
source.addEventListener("foo",function(event){vardata=event.data;varorigin=event.origin;varlastEventId=event.lastEventId;// handle message},false);
上面代碼表示，瀏覽器對foo事件進行監(jiān)聽。
close方法
close方法用于關閉連接。
source.close();
5. 數據格式
服務器端發(fā)送的數據的HTTP頭信息如下：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
后面的行都是如下格式：
field: value\n
field可以取四個值：“data”, “event”, “id”, or “retry”，也就是說有四類頭信息。每次HTTP通信可以包含這四類頭信息中的一類或多類。\n代表換行符。
以冒號開頭的行，表示注釋。通常，服務器每隔一段時間就會向瀏覽器發(fā)送一個注釋，保持連接不中斷。
: This is a comment
下面是一些例子。
: this is a test stream\n\n
data: some text\n\n
data: another message\n
data: with two lines \n\n
data：數據欄
數據內容用data表示，可以占用一行或多行。如果數據只有一行，則像下面這樣，以“\n\n”結尾。
data:? message\n\n
如果數據有多行，則最后一行用“\n\n”結尾，前面行都用“\n”結尾。
data: begin message\n
data: continue message\n\n
總之，最后一行的data，結尾要用兩個換行符號，表示數據結束。
以發(fā)送JSON格式的數據為例。
data: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n
id：數據標識符
數據標識符用id表示，相當于每一條數據的編號。
id: msg1\n
data: message\n\n
瀏覽器用lastEventId屬性讀取這個值。一旦連接斷線，瀏覽器會發(fā)送一個HTTP頭，里面包含一個特殊的“Last-Event-ID”頭信息，將這個值發(fā)送回來，用來幫助服務器端重建連接。因此，這個頭信息可以被視為一種同步機制。
event欄：自定義信息類型
event頭信息表示自定義的數據類型，或者說數據的名字。
event: foo\n
data: a foo event\n\n
data: an unnamed event\n\n
event: bar\n
data: a bar event\n\n
上面的代碼創(chuàng)造了三條信息。第一條是foo，觸發(fā)瀏覽器端的foo事件；第二條未取名，表示默認類型，觸發(fā)瀏覽器端的message事件；第三條是bar，觸發(fā)瀏覽器端的bar事件。
retry：最大間隔時間
瀏覽器默認的是，如果服務器端三秒內沒有發(fā)送任何信息，則開始重連。服務器端可以用retry頭信息，指定通信的最大間隔時間。
retry: 10000\n
服務器代碼
服務器端發(fā)送事件，要求服務器與瀏覽器保持連接。對于不同的服務器軟件來說，所消耗的資源是不一樣的。Apache服務器，每個連接就是一個線程，如果要維持大量連接，勢必要消耗大量資源。Node.js則是所有連接都使用同一個線程，因此消耗的資源會小得多，但是這要求每個連接不能包含很耗時的操作，比如磁盤的IO讀寫。
下面是Node.js的服務器發(fā)送事件的代碼實例。
varhttp=require("http");http.createServer(function(req,res){varfileName="."+req.url;if(fileName==="./stream"){res.writeHead(200,{"Content-Type":"text/event-stream","Cache-Control":"no-cache","Connection":"keep-alive"});res.write("retry: 10000\n");res.write("event: connecttime\n");res.write("data: "+(newDate())+"\n\n");res.write("data: "+(newDate())+"\n\n");interval=setInterval(function(){res.write("data: "+(newDate())+"\n\n");},1000);req.connection.addListener("close",function(){clearInterval(interval);},false);}}).listen(80,"127.0.0.1");
PHP代碼實例。
參考鏈接
Colin Ihrig,Implementing Push Technology Using Server-Sent Events
Colin Ihrig，The Server Side of Server-Sent Events
Eric Bidelman,Stream Updates with Server-Sent Events
Segment.io,Server-Sent Events: The simplest realtime browser spec
