Server-Sent Events · Web API 教程

# Server-Sent Events ## 簡介服務器向客戶端推送數據，有很多解決方案。除了“輪詢” 和 WebSocket，HTML 5 還提供了 Server-Sent Events（以下簡稱 SSE）。一般來說，HTTP 協議只能客戶端向服務器發起請求，服務器不能主動向客戶端推送。但是有一種特殊情況，就是服務器向客戶端聲明，接下來要發送的是流信息（streaming）。也就是說，發送的不是一次性的數據包，而是一個數據流，會連續不斷地發送過來。這時，客戶端不會關閉連接，會一直等著服務器發過來的新的數據流。本質上，這種通信就是以流信息的方式，完成一次用時很長的下載。 SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。它基于 HTTP 協議，目前除了 IE/Edge，其他瀏覽器都支持。 ## 與 WebSocket 的比較 SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務器之間的通信渠道，然后服務器向瀏覽器推送信息。總體來說，WebSocket 更強大和靈活。因為它是全雙工通道，可以雙向通信；SSE 是單向通道，只能服務器向瀏覽器發送，因為 streaming 本質上就是下載。如果瀏覽器向服務器發送信息，就變成了另一次 HTTP 請求。但是，SSE 也有自己的優點。 - SSE 使用 HTTP 協議，現有的服務器軟件都支持。WebSocket 是一個獨立協議。 - SSE 屬于輕量級，使用簡單；WebSocket 協議相對復雜。 - SSE 默認支持斷線重連，WebSocket 需要自己實現斷線重連。 - SSE 一般只用來傳送文本，二進制數據需要編碼后傳送，WebSocket 默認支持傳送二進制數據。 - SSE 支持自定義發送的消息類型。因此，兩者各有特點，適合不同的場合。 ## 客戶端 API ### EventSource 對象 SSE 的客戶端 API 部署在`EventSource`對象上。下面的代碼可以檢測瀏覽器是否支持 SSE。 ```javascript if ('EventSource' in window) { // ... } ``` 使用 SSE 時，瀏覽器首先生成一個`EventSource`實例，向服務器發起連接。 ```javascript var source = new EventSource(url); ``` 上面的`url`可以與當前網址同域，也可以跨域。跨域時，可以指定第二個參數，打開`withCredentials`屬性，表示是否一起發送 Cookie。 ```javascript var source = new EventSource(url, { withCredentials: true }); ``` ### readyState 屬性 `EventSource`實例的`readyState`屬性，表明連接的當前狀態。該屬性只讀，可以取以下值。 - 0：相當于常量`EventSource.CONNECTING`，表示連接還未建立，或者斷線正在重連。 - 1：相當于常量`EventSource.OPEN`，表示連接已經建立，可以接受數據。 - 2：相當于常量`EventSource.CLOSED`，表示連接已斷，且不會重連。 ```javascript var source = new EventSource(url); console.log(source.readyState); ``` ### url 屬性 `EventSource`實例的`url`屬性返回連接的網址，該屬性只讀。 ### withCredentials 屬性 `EventSource`實例的`withCredentials`屬性返回一個布爾值，表示當前實例是否開啟 CORS 的`withCredentials`。該屬性只讀，默認是`false`。 ### onopen 屬性連接一旦建立，就會觸發`open`事件，可以在`onopen`屬性定義回調函數。 ```javascript source.onopen = function (event) { // ... }; // 另一種寫法 source.addEventListener('open', function (event) { // ... }, false); ``` ### onmessage 屬性客戶端收到服務器發來的數據，就會觸發`message`事件，可以在`onmessage`屬性定義回調函數。 ```javascript 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`：數據的編號，由服務器端發送。如果沒有編號，這個屬性為空。 ### onerror 屬性如果發生通信錯誤（比如連接中斷），就會觸發`error`事件，可以在`onerror`屬性定義回調函數。 ```javascript source.onerror = function (event) { // handle error event }; // 另一種寫法 source.addEventListener('error', function (event) { // handle error event }, false); ``` ### 自定義事件默認情況下，服務器發來的數據，總是觸發瀏覽器`EventSource`實例的`message`事件。開發者還可以自定義 SSE 事件，這種情況下，發送回來的數據不會觸發`message`事件。 ```javascript source.addEventListener('foo', function (event) { var data = event.data; var origin = event.origin; var lastEventId = event.lastEventId; // handle message }, false); ``` 上面代碼中，瀏覽器對 SSE 的`foo`事件進行監聽。如何實現服務器發送`foo`事件，請看下文。 ### close() 方法 `close`方法用于關閉 SSE 連接。 ```javascript source.close(); ``` ## 服務器實現 ### 數據格式服務器向瀏覽器發送的 SSE 數據，必須是 UTF-8 編碼的文本，具有如下的 HTTP 頭信息。 ```html Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` 上面三行之中，第一行的`Content-Type`必須指定 MIME 類型為`event-steam`。每一次發送的信息，由若干個`message`組成，每個`message`之間用`\n\n`分隔。每個`message`內部由若干行組成，每一行都是如下格式。 ```html [field]: value\n ``` 上面的`field`可以取四個值。 - data - event - id - retry 此外，還可以有冒號開頭的行，表示注釋。通常，服務器每隔一段時間就會向瀏覽器發送一個注釋，保持連接不中斷。 ```html : This is a comment ``` 下面是一個例子。 ```html : this is a test stream\n\n data: some text\n\n data: another message\n data: with two lines \n\n ``` ### data 字段數據內容用`data`字段表示。 ```html data: message\n\n ``` 如果數據很長，可以分成多行，最后一行用`\n\n`結尾，前面行都用`\n`結尾。 ```html data: begin message\n data: continue message\n\n ``` 下面是一個發送 JSON 數據的例子。 ```html data: {\n data: "foo": "bar",\n data: "baz", 555\n data: }\n\n ``` ### id 字段數據標識符用`id`字段表示，相當于每一條數據的編號。 ```html id: msg1\n data: message\n\n ``` 瀏覽器用`lastEventId`屬性讀取這個值。一旦連接斷線，瀏覽器會發送一個 HTTP 頭，里面包含一個特殊的`Last-Event-ID`頭信息，將這個值發送回來，用來幫助服務器端重建連接。因此，這個頭信息可以被視為一種同步機制。 ### event 字段 `event`字段表示自定義的事件類型，默認是`message`事件。瀏覽器可以用`addEventListener()`監聽該事件。 ```html 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`事件。下面是另一個例子。 ```html event: userconnect data: {"username": "bobby", "time": "02:33:48"} event: usermessage data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} event: userdisconnect data: {"username": "bobby", "time": "02:34:23"} event: usermessage data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} ``` ### retry 字段服務器可以用`retry`字段，指定瀏覽器重新發起連接的時間間隔。 ```html retry: 10000\n ``` 兩種情況會導致瀏覽器重新發起連接：一種是時間間隔到期，二是由于網絡錯誤等原因，導致連接出錯。 ## Node 服務器實例 SSE 要求服務器與瀏覽器保持連接。對于不同的服務器軟件來說，所消耗的資源是不一樣的。Apache 服務器，每個連接就是一個線程，如果要維持大量連接，勢必要消耗大量資源。Node 則是所有連接都使用同一個線程，因此消耗的資源會小得多，但是這要求每個連接不能包含很耗時的操作，比如磁盤的 IO 讀寫。下面是 Node 的 SSE 服務器[實例](http://cjihrig.com/blog/server-sent-events-in-node-js/)。 ```javascript 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", "Access-Control-Allow-Origin": '*', }); 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(8844, "127.0.0.1"); ``` ## 參考鏈接 - 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/)