SSE：伺服器傳送事件,使用長連結進行通訊
概述
傳統的網頁都是瀏覽器向伺服器“查詢”資料，但是很多場合，最有效的方式是伺服器向瀏覽器“傳送”資料。比如，每當收到新的電子郵件，伺服器就向瀏覽器傳送一個“通知”，這要比瀏覽器按時向伺服器查詢（polling）更有效率。
伺服器傳送事件（Server-Sent Events，簡稱SSE）就是為了解決這個問題，而提出的一種新API，部署在EventSource物件上。目前，除了IE，其他主流瀏覽器都支援。
簡單說，所謂SSE，就是瀏覽器向伺服器傳送一個HTTP請求，然後伺服器不斷單向地向瀏覽器推送“資訊”（message）。這種資訊在格式上很簡單，就是“資訊”加上字首“data: ”，然後以“\n\n”結尾。
SSE與WebSocket有相似功能，都是用來建立瀏覽器與伺服器之間的通訊渠道。兩者的區別在於：
-
WebSocket是全雙工通道，可以雙向通訊，功能更強；SSE是單向通道，只能伺服器向瀏覽器端傳送。
-
WebSocket是一個新的協議，需要伺服器端支援；SSE則是部署在HTTP協議之上的，現有的伺服器軟體都支援。
-
SSE是一個輕量級協議，相對簡單；WebSocket是一種較重的協議，相對複雜。
-
SSE預設支援斷線重連，WebSocket則需要額外部署。
-
SSE支援自定義傳送的資料型別。
從上面的比較可以看出，兩者各有特點，適合不同的場合。
客戶端程式碼
概述
首先，使用下面的程式碼，檢測瀏覽器是否支援SSE。
if (!!window.EventSource) { // ... }
然後，部署SSE大概如下。
var source = new EventSource('/dates'); source.onmessage = function(e){ console.log(e.data); }; // 或者 source.addEventListener('message', function(e){})
建立連線
首先，瀏覽器向伺服器發起連線，生成一個EventSource的例項物件。
var source = new EventSource(url);
引數url就是伺服器網址，必須與當前網頁的網址在同一個網域（domain），而且協議和埠都必須相同。
下面是一個建立連線的例項。
if (!!window.EventSource) { var source = new EventSource('http://127.0.0.1/sses/'); }
新生成的EventSource例項物件，有一個readyState屬性，表明連線所處的狀態。
source.readyState
它可以取以下值：
-
0，相當於常量EventSource.CONNECTING，表示連線還未建立，或者連線斷線。
-
1，相當於常量EventSource.OPEN，表示連線已經建立，可以接受資料。
-
2，相當於常量EventSource.CLOSED，表示連線已斷，且不會重連。
open事件
連線一旦建立，就會觸發open事件，可以定義相應的回撥函式。
source.onopen = function(event) { // handle open event }; // 或者 source.addEventListener("open", function(event) { // handle open event }, false);
message事件
收到資料就會觸發message事件。
source.onmessage = function(event) { var data = event.data; var origin = event.origin; var lastEventId = event.lastEventId; // handle message }; // 或者 source.addEventListener("message", function(event) { var data = event.data; var origin = event.origin; var lastEventId = event.lastEventId; // handle message }, false);
引數物件event有如下屬性：
-
data：伺服器端傳回的資料（文字格式）。
-
origin： 伺服器端URL的域名部分，即協議、域名和埠。
-
lastEventId：資料的編號，由伺服器端傳送。如果沒有編號，這個屬性為空。
error事件
如果發生通訊錯誤（比如連線中斷），就會觸發error事件。
source.onerror = function(event) { // handle error event }; // 或者 source.addEventListener("error", function(event) { // handle error event }, false);
自定義事件
伺服器可以與瀏覽器約定自定義事件。這種情況下，傳送回來的資料不會觸發message事件。
source.addEventListener("foo", function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
}, false);
上面程式碼表示，瀏覽器對foo事件進行監聽。
close方法
close方法用於關閉連線。
source.close();
資料格式
概述
伺服器端傳送的資料的HTTP頭資訊如下：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
後面的行都是如下格式：
field: value\n
field可以取四個值：“data”, “event”, “id”, or “retry”，也就是說有四類頭資訊。每次HTTP通訊可以包含這四類頭資訊中的一類或多類。\n代表換行符。
以冒號開頭的行，表示註釋。通常，伺服器每隔一段時間就會向瀏覽器傳送一個註釋，保持連線不中斷。
: 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，結尾要用兩個換行符號，表示資料結束。
以傳送JSON格式的資料為例。
data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n
id：資料識別符號
資料識別符號用id表示，相當於每一條資料的編號。
id: msg1\n
data: message\n\n
瀏覽器用lastEventId屬性讀取這個值。一旦連線斷線，瀏覽器會發送一個HTTP頭，裡面包含一個特殊的“Last-Event-ID”頭資訊，將這個值傳送回來，用來幫助伺服器端重建連線。因此，這個頭資訊可以被視為一種同步機制。
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
上面的程式碼創造了三條資訊。第一條是foo，觸發瀏覽器端的foo事件；第二條未取名，表示預設型別，觸發瀏覽器端的message事件；第三條是bar，觸發瀏覽器端的bar事件。
retry：最大間隔時間
瀏覽器預設的是，如果伺服器端三秒內沒有傳送任何資訊，則開始重連。伺服器端可以用retry頭資訊，指定通訊的最大間隔時間。
retry: 10000\n
伺服器程式碼
伺服器端傳送事件，要求伺服器與瀏覽器保持連線。對於不同的伺服器軟體來說，所消耗的資源是不一樣的。Apache伺服器，每個連線就是一個執行緒，如果要維持大量連線，勢必要消耗大量資源。Node.js則是所有連線都使用同一個執行緒，因此消耗的資源會小得多，但是這要求每個連線不能包含很耗時的操作，比如磁碟的IO讀寫。
下面是Node.js的伺服器傳送事件的程式碼例項。
var http = require("http"); http.createServer(function (req, res) { var fileName = "." + 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: " + (new Date()) + "\n\n"); res.write("data: " + (new Date()) + "\n\n"); interval = setInterval(function() { res.write("data: " + (new Date()) + "\n\n"); }, 1000); req.connection.addListener("close", function () { clearInterval(interval); }, false); } }).listen(80, "127.0.0.1");
PHP程式碼例項。
<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); // 建議不要快取SSE資料 /** * Constructs the SSE data format and flushes that data to the client. * * @param string $id Timestamp/id of this connection. * @param string $msg Line of text that should be transmitted. */ function sendMsg($id, $msg) { echo "id: $id" . PHP_EOL; echo "data: $msg" . PHP_EOL; echo PHP_EOL; ob_flush(); flush(); } $serverTime = time(); sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));