SSE：服務器發送事件,使用長鏈接進行通訊

 

概述

傳統的網頁都是瀏覽器向服務器“查詢”數據，但是很多場合，最有效的方式是服務器向瀏覽器“發送”數據。比如，每當收到新的電子郵件，服務器就向瀏覽器發送一個“通知”，這要比瀏覽器按時向服務器查詢（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的服務器發送事件的代碼實例。

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
• Colin Ihrig，The Server Side of Server-Sent Events
• Eric Bidelman, Stream Updates with Server-Sent Events
• MDN，Using server-sent events
• Segment.io, Server-Sent Events: The simplest realtime browser spec
• http://javascript.ruanyifeng.com/htmlapi/eventsource.html