[TOC] ## 概述 傳統的網頁都是瀏覽器向服務器“查詢”數據，但是很多場合，最有效的方式是服務器向瀏覽器“發送”數據。比如，每當收到新的電子郵件，服務器就向瀏覽器發送一個“通知”，這要比瀏覽器按時向服務器查詢（polling）更有效率。 服務器發送事件（Server-Sent Events，簡稱SSE）就是為了解決這個問題，而提出的一種新API，部署在EventSource對象上。目前，除了IE，其他主流瀏覽器都支持。 簡單說，所謂SSE，就是瀏覽器向服務器發送一個HTTP請求，然后服務器不斷單向地向瀏覽器推送“信息”（message）。這種信息在格式上很簡單，就是“信息”加上前綴“data: ”，然后以“\n\n”結尾。 ~~~ $ curl http://example.com/dates data: 1394572346452 data: 1394572347457 data: 1394572348463 ^C ~~~ 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的服務器發送事件的[代碼實例](http://cjihrig.com/blog/server-sent-events-in-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())); ~~~ ## 參考鏈接 * Colin Ihrig,?[Implementing Push Technology Using Server-Sent Events](http://jspro.com/apis/implementing-push-technology-using-server-sent-events/) * Colin Ihrig，[The Server Side of Server-Sent Events](http://cjihrig.com/blog/the-server-side-of-server-sent-events/) * Eric Bidelman,?[Stream Updates with Server-Sent Events](http://www.html5rocks.com/en/tutorials/eventsource/basics/) * MDN，[Using server-sent events](https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events) * Segment.io,?[Server-Sent Events: The simplest realtime browser spec](https://segment.io/blog/2014-04-03-server-sent-events-the-simplest-realtime-browser-spec/)