SSE概述
傳統(tǒng)的網(wǎng)頁都是瀏覽器向服務(wù)器“查詢”數(shù)據(jù)，但是很多場合，最有效的方式是服務(wù)器向瀏覽器“發(fā)送”數(shù)據(jù)。這要比瀏覽器按時向服務(wù)器查詢（polling）更有效率。
服務(wù)器發(fā)送事件（Server-Sent Events，簡稱SSE）就是為了解決這個問題，而提出的一種新API，部署在EventSource對象上。目前，除了IE，其他主流瀏覽器都支持。
簡單說，所謂SSE，就是瀏覽器向服務(wù)器發(fā)送一個HTTP請求，然后服務(wù)器不斷單向地向瀏覽器推送“信息”（message）。這種信息在格式上很簡單，就是“信息”加上前綴“data: ”，然后以“\n\n”結(jié)尾。
$ curl http://localhost/stream
data: 1394572346452
data: 1394572347457
data: 1394572348463
^C
SSE特點
SSE與WebSocket有相似功能，都是用來建立瀏覽器與服務(wù)器之間的通信渠道。兩者的區(qū)別在于：
- WebSocket是全雙工通道，可以雙向通信，功能更強；SSE是單向通道，只能服務(wù)器向瀏覽器端發(fā)送，因為流信息本質(zhì)上就是下載。
- WebSocket是一個新的協(xié)議，需要服務(wù)器端支持；SSE則是部署在HTTP協(xié)議之上的，現(xiàn)有的服務(wù)器軟件都支持。
- SSE是一個輕量級協(xié)議，相對簡單；WebSocket是一種較重的協(xié)議，相對復(fù)雜。
- SSE 一般只用來傳送文本，二進制數(shù)據(jù)需要編碼后傳送；WebSocket 默認支持傳送二進制數(shù)據(jù)。
- SSE默認支持斷線重連；WebSocket則需要自己實現(xiàn)。
- SSE支持自定義發(fā)送的數(shù)據(jù)類型。
客戶端代碼
EventSource
SSE 的客戶端 API 部署在EventSource對象上。下面的代碼可以檢測瀏覽器是否支持 SSE。
if (!!window.EventSource) {
// ...
}
//或者
if ('EventSource' in window) {
// ...
}
使用 SSE 時，瀏覽器首先生成一個EventSource實例，向服務(wù)器發(fā)起連接。
var source = new EventSource(url);
上面的url可以與當(dāng)前網(wǎng)址同域，也可以跨域。跨域時，可以指定第二個參數(shù)，打開withCredentials屬性，表示是否一起發(fā)送 Cookie。
var source = new EventSource(url, { withCredentials: true });
EventSource實例的readyState屬性(source.readyState)，表明連接的當(dāng)前狀態(tài)。該屬性只讀，可以取以下值。
- 0：相當(dāng)于常量EventSource.CONNECTING，表示連接還未建立，或者斷線正在重連。
- 1：相當(dāng)于常量EventSource.OPEN，表示連接已經(jīng)建立，可以接受數(shù)據(jù)。
- 2：相當(dāng)于常量EventSource.CLOSED，表示連接已斷，且不會重連。
基本用法
open事件
連接一旦建立，就會觸發(fā)open事件，可以定義相應(yīng)的回調(diào)函數(shù)。
source.onopen = function(event) {
// handle open event
};
// 或者
source.addEventListener("open", function(event) {
// handle open event
}, false);
message事件
收到數(shù)據(jù)就會觸發(fā)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);
參數(shù)對象event有如下屬性：
data：服務(wù)器端傳回的數(shù)據(jù)（文本格式）。
origin： 服務(wù)器端URL的域名部分，即協(xié)議、域名和端口。
lastEventId：數(shù)據(jù)的編號，由服務(wù)器端發(fā)送。如果沒有編號，這個屬性為空。
error事件
如果發(fā)生通信錯誤（比如連接中斷），就會觸發(fā)error事件。
source.onerror = function(event) {
// handle error event
};
// 或者
source.addEventListener("error", function(event) {
// handle error event
}, false);
自定義事件
服務(wù)器可以與瀏覽器約定自定義事件。這種情況下，發(fā)送回來的數(shù)據(jù)不會觸發(fā)message事件。
source.addEventListener("foo", function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
}, false);
上面代碼表示，瀏覽器對foo事件進行監(jiān)聽。
close方法
close方法用于關(guān)閉連接。
source.close();
客戶端實現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="example"></div>
<script>
var source = new EventSource('http://127.0.0.1/stream');
var div = document.getElementById('example');
source.onopen = function (event) {
div.innerHTML += '<p>Connection open ...</p>';
};
source.onerror = function (event) {
div.innerHTML += '<p>Connection close.</p>';
};
source.addEventListener('connecttime', function (event) {
div.innerHTML += ('<p>Start time: ' + event.data + '</p>');
}, false);
source.addEventListener('myevent', function (event) {
div.innerHTML += ('<p>MyEvent: ' + event.data + '</p>');
}, false);
source.onmessage = function (event) {
div.innerHTML += ('<p>Ping: ' + event.data + '</p>');
div.innerHTML +=('<p>Message: ' + event.mymessage + '</p>');
};
</script>
</body>
</html>
服務(wù)端實現(xiàn)
數(shù)據(jù)格式
服務(wù)器端發(fā)送的數(shù)據(jù)的HTTP頭信息如下：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
后面的行都是如下格式：
field: value\n
field可以取四個值：“data”, “event”, “id”, or “retry”，也就是說有四類頭信息。每次HTTP通信可以包含這四類頭信息中的一類或多類。\n代表換行符。
以冒號開頭的行，表示注釋。通常，服務(wù)器每隔一段時間就會向瀏覽器發(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：數(shù)據(jù)欄
數(shù)據(jù)內(nèi)容用data表示，可以占用一行或多行。如果數(shù)據(jù)只有一行，則像下面這樣，以“\n\n”結(jié)尾。
data: message\n\n
如果數(shù)據(jù)有多行，則最后一行用“\n\n”結(jié)尾，前面行都用“\n”結(jié)尾。
data: begin message\n
data: continue message\n\n
總之，最后一行的data，結(jié)尾要用兩個換行符號，表示數(shù)據(jù)結(jié)束。以發(fā)送JSON格式的數(shù)據(jù)為例。
data: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n
id：數(shù)據(jù)標(biāo)識符
數(shù)據(jù)標(biāo)識符用id表示，相當(dāng)于每一條數(shù)據(jù)的編號。
id: msg1\n
data: message\n\n
瀏覽器用lastEventId屬性讀取這個值。一旦連接斷線，瀏覽器會發(fā)送一個HTTP頭，里面包含一個特殊的“Last-Event-ID”頭信息，將這個值發(fā)送回來，用來幫助服務(wù)器端重建連接。因此，這個頭信息可以被視為一種同步機制。
event欄：自定義信息類型
event頭信息表示自定義的數(shù)據(jù)類型，或者說數(shù)據(jù)的名字。
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事件。下面是另一個例子：
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：最大間隔時間
瀏覽器默認的是，如果服務(wù)器端三秒內(nèi)沒有發(fā)送任何信息，則開始重連。服務(wù)器端可以用retry頭信息，指定通信的最大間隔時間。
retry: 10000\n
NodeJS實現(xiàn)
SSE 要求服務(wù)器與瀏覽器保持連接。對于不同的服務(wù)器軟件來說，所消耗的資源是不一樣的。Apache 服務(wù)器，每個連接就是一個線程，如果要維持大量連接，勢必要消耗大量資源。Node 則是所有連接都使用同一個線程，因此消耗的資源會小得多，但是這要求每個連接不能包含很耗時的操作，比如磁盤的 IO 讀寫。
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);
/*
interval2 = setInterval(function() {
res.write("event: myevent\n");
res.write("data: " + (new Date()) + "\n\n");
}, 2000);
*/
req.connection.addListener("close", function () {
clearInterval(interval);
// clearInterval(interval2);
}, false);
}
}).listen(80, "127.0.0.1");
PHP代碼實現(xiàn)
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // 建議不要緩存SSE數(shù)據(jù)
/**
* 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()));
?>
Java代碼實現(xiàn)
實現(xiàn)由兩部分組成：一部分是用來產(chǎn)生數(shù)據(jù)的 org.eclipse.jetty.servlets.EventSource 接口的實現(xiàn)，另一部分是作為瀏覽器訪問端點的繼承自 org.eclipse.jetty.servlets.EventSourceServlet 類的 servlet 實現(xiàn)。
需要實現(xiàn) EventSource 接口的 onOpen、onResume 和 onClose 方法，其中 onOpen 方法在瀏覽器端的連接打開的時候被調(diào)用，onResume 方法在瀏覽器端重新建立連接時被調(diào)用，onClose 方法則在瀏覽器關(guān)閉連接的時候被調(diào)用。onOpen 和 onResume 方法都有一個 EventSource.Emitter 接口類型的參數(shù)，可以用來發(fā)送數(shù)據(jù)。EventSource.Emitter 接口中包含的方法包括 data、event、comment、id 和 close 等，分別對應(yīng)于通訊協(xié)議中各種不同類型的事件。而 onResume 方法還額外包含一個參數(shù) lastEventId，表示通過 Last-Event-ID 頭發(fā)送過來的最近一次事件的標(biāo)識符。
EventSource 類對應(yīng)的 servlet 實現(xiàn)比較簡單，只需要繼承自 EventSourceServlet 類并覆寫 newEventSource 方法即可。在 newEventSource 方法的實現(xiàn)中，需要返回一個 MovementEventSource 類的對象
IE 支持
使用瀏覽器原生的 EventSource 對象的一個比較大的問題是 IE 并不提供支持。為了在 IE 上提供同樣的支持，一般有兩種辦法。第一種辦法是在其他瀏覽器上使用原生 EventSource 對象，而在 IE 上則使用簡易輪詢或 COMET 技術(shù)來實現(xiàn)；另外一種做法是使用 polyfill 技術(shù)，即使用第三方提供的 JavaScript 庫來屏蔽瀏覽器的不同。本文使用的是 polyfill 技術(shù)，只需要在頁面中加載第三方 JavaScript 庫即可。應(yīng)用本身的瀏覽器端代碼并不需要進行改動。一般推薦使用第二種做法，因為這樣的話，在服務(wù)器端只需要使用一種實現(xiàn)技術(shù)即可。
在 IE 上提供類似原生 EventSource 對象的實現(xiàn)并不簡單。理論上來說，只需要通過 XMLHttpRequest 對象來獲取服務(wù)器端的響應(yīng)內(nèi)容，并通過文本解析，就可以提取出相應(yīng)的事件，并觸發(fā)對應(yīng)的事件處理方法。不過問題在于 IE 上的 XMLHttpRequest 對象并不支持獲取部分的響應(yīng)內(nèi)容。只有在響應(yīng)完成之后，才能獲取其內(nèi)容。由于服務(wù)器端推送事件使用的是一個長連接。當(dāng)連接一直處于打開狀態(tài)時，通過 XMLHttpRequest 對象并不能獲取響應(yīng)的內(nèi)容，也就無法觸發(fā)對應(yīng)的事件。更具體的來說，當(dāng) XMLHttpRequest 對象的 readyState 為 3（READYSTATE_INTERACTIVE）時，其 responseText 屬性是無法獲取的。
為了解決 IE 上 XMLHttpRequest 對象的問題，就需要使用 IE 8 中引入的 XDomainRequest 對象。XDomainRequest 對象的作用是發(fā)出跨域的 AJAX 請求。XDomainRequest 對象提供了 onprogress 事件。當(dāng) onprogress 事件發(fā)生時，可以通過 responseText 屬性來獲取到響應(yīng)的部分內(nèi)容。這是 XDomainRequest 對象和 XMLHttpRequest 對象的最大不同，也是使用 XDomainRequest 對象來實現(xiàn)類似原生 EventSource 對象的基礎(chǔ)。在使用 XDomainRequest 對象打開與服務(wù)器端的連接之后，當(dāng)服務(wù)器端有新的數(shù)據(jù)產(chǎn)生時，可以通過 XDomainRequest 對象的 onprogress 事件的處理方法來進行處理，對接收到的數(shù)據(jù)進行解析，根據(jù)數(shù)據(jù)的內(nèi)容觸發(fā)相應(yīng)的事件。
不過由于 XDomainRequest 對象本來的目的是發(fā)出跨域 AJAX 請求，考慮到跨域訪問的安全性問題，XDomainRequest 對象在使用時的限制也比較嚴格。這些限制會影響到其作為 EventSource 對象的實現(xiàn)方式。具體的限制和解決辦法如下所示：
- 服務(wù)器端的響應(yīng)需要包含 Access-Control-Allow-Origin 頭，用來聲明允許從哪些域訪問該 URL?！?”表示允許來自任何域的訪問，不推薦使用該值。一般使用與當(dāng)前應(yīng)用相同的域，限制只允許來自當(dāng)前域的訪問。
- XDomainRequest 對象發(fā)出的請求不能包含自定義的 HTTP 頭，這就限制了不能使用 Last-Event-ID 頭來聲明瀏覽器端最近一次接收到的事件的標(biāo)識符。只能通過 HTTP 請求的其他方式來傳遞該標(biāo)識符，如 GET 請求的參數(shù)或 POST 請求的內(nèi)容體。
- XDomainRequest 對象的請求的內(nèi)容類型（Content-Type）只能是“text/plain”。這就意味著，當(dāng)使用 POST 請求時，服務(wù)器端使用的框架，如 servlet，不會對 POST 請求的內(nèi)容進行自動解析，無法使用 HttpServletRequest 類的 getParameter 方法來獲取 POST 請求的內(nèi)容。只能在服務(wù)器端對原始的請求內(nèi)容進行解析，獲取到其中的參數(shù)的值。
- XDomainRequest 對象發(fā)出的請求中不包含任何與用戶認證相關(guān)的信息，包括 cookie 等。這就意味著，如果服務(wù)器端需要認證，則需要通過 HTTP 請求的其他方式來傳遞用戶的認證信息，比如 session 的 ID 等。
由于 XDomainRequest 對象的這些限制，服務(wù)器端的實現(xiàn)也需要作出相應(yīng)的改動。這些改動包括返回 Access-Control-Allow-Origin 頭；對于瀏覽器端發(fā)送的“text/plain”類型的參數(shù)進行解析；處理請求中包含的用戶認證相關(guān)的信息。
本文的示例使用的 polyfill 庫是 GitHub 上的 Yaffle 開發(fā)的 EventSource 項目，具體的地址見參考資源。在使用該 polyfill 庫，并對服務(wù)器端的實現(xiàn)進行修改之后，就可以在 IE 8 及以上的瀏覽器中使用服務(wù)器推送事件。如果需要支持 IE 7，則只能使用簡易輪詢或 COMET 技術(shù)。本文的示例代碼見參考資源。
