SSE概述
傳統(tǒng)的網(wǎng)頁都是瀏覽器向服務(wù)器“查詢”數(shù)據(jù)秧饮，但是很多場合抄瑟，最有效的方式是服務(wù)器向?yàn)g覽器“發(fā)送”數(shù)據(jù)。這要比瀏覽器按時(shí)向服務(wù)器查詢（polling）更有效率。
服務(wù)器發(fā)送事件（Server-Sent Events栏渺，簡稱SSE）就是為了解決這個(gè)問題，而提出的一種新API锐涯，部署在EventSource對象上磕诊。目前，除了IE纹腌，其他主流瀏覽器都支持霎终。
簡單說，所謂SSE升薯，就是瀏覽器向服務(wù)器發(fā)送一個(gè)HTTP請求莱褒，然后服務(wù)器不斷單向地向?yàn)g覽器推送“信息”（message）。這種信息在格式上很簡單涎劈，就是“信息”加上前綴“data: ”广凸，然后以“\n\n”結(jié)尾阅茶。
$ curl http://localhost/stream
data: 1394572346452
data: 1394572347457
data: 1394572348463
^C
SSE特點(diǎn)
SSE與WebSocket有相似功能，都是用來建立瀏覽器與服務(wù)器之間的通信渠道谅海。兩者的區(qū)別在于：
- WebSocket是全雙工通道脸哀，可以雙向通信，功能更強(qiáng)扭吁；SSE是單向通道撞蜂，只能服務(wù)器向?yàn)g覽器端發(fā)送，因?yàn)榱餍畔⒈举|(zhì)上就是下載智末。
- WebSocket是一個(gè)新的協(xié)議谅摄，需要服務(wù)器端支持徒河；SSE則是部署在HTTP協(xié)議之上的系馆，現(xiàn)有的服務(wù)器軟件都支持。
- SSE是一個(gè)輕量級協(xié)議顽照，相對簡單由蘑；WebSocket是一種較重的協(xié)議，相對復(fù)雜代兵。
- SSE 一般只用來傳送文本尼酿，二進(jìn)制數(shù)據(jù)需要編碼后傳送；WebSocket 默認(rèn)支持傳送二進(jìn)制數(shù)據(jù)植影。
- SSE默認(rèn)支持?jǐn)嗑€重連裳擎；WebSocket則需要自己實(shí)現(xiàn)。
- SSE支持自定義發(fā)送的數(shù)據(jù)類型思币。
客戶端代碼
EventSource
SSE 的客戶端 API 部署在EventSource對象上鹿响。下面的代碼可以檢測瀏覽器是否支持 SSE。
if (!!window.EventSource) {
// ...
}
//或者
if ('EventSource' in window) {
// ...
}
使用 SSE 時(shí)谷饿，瀏覽器首先生成一個(gè)EventSource實(shí)例惶我，向服務(wù)器發(fā)起連接。
var source = new EventSource(url);
上面的url可以與當(dāng)前網(wǎng)址同域博投，也可以跨域绸贡。跨域時(shí)毅哗，可以指定第二個(gè)參數(shù)听怕，打開withCredentials屬性，表示是否一起發(fā)送 Cookie虑绵。
var source = new EventSource(url, { withCredentials: true });
EventSource實(shí)例的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ā)送巩掺。如果沒有編號，這個(gè)屬性為空页畦。
error事件
如果發(fā)生通信錯(cuò)誤（比如連接中斷）胖替，就會觸發(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事件進(jìn)行監(jiān)聽记焊。
close方法
close方法用于關(guān)閉連接。
source.close();
客戶端實(shí)現(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ù)端實(shí)現(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可以取四個(gè)值：“data”, “event”, “id”, or “retry”栓撞，也就是說有四類頭信息遍膜。每次HTTP通信可以包含這四類頭信息中的一類或多類。\n代表換行符瓤湘。
以冒號開頭的行瓢颅，表示注釋。通常弛说，服務(wù)器每隔一段時(shí)間就會向?yàn)g覽器發(fā)送一個(gè)注釋挽懦，保持連接不中斷。
: 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é)尾要用兩個(gè)換行符號量瓜，表示數(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屬性讀取這個(gè)值欺劳。一旦連接斷線唧取，瀏覽器會發(fā)送一個(gè)HTTP頭铅鲤，里面包含一個(gè)特殊的“Last-Event-ID”頭信息划提，將這個(gè)值發(fā)送回來，用來幫助服務(wù)器端重建連接邢享。因此鹏往，這個(gè)頭信息可以被視為一種同步機(jī)制。
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事件唐瀑；第二條未取名，表示默認(rèn)類型插爹，觸發(fā)瀏覽器端的message事件哄辣；第三條是bar，觸發(fā)瀏覽器端的bar事件赠尾。下面是另一個(gè)例子：
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：最大間隔時(shí)間
瀏覽器默認(rèn)的是力穗，如果服務(wù)器端三秒內(nèi)沒有發(fā)送任何信息，則開始重連气嫁。服務(wù)器端可以用retry頭信息当窗，指定通信的最大間隔時(shí)間。
retry: 10000\n
NodeJS實(shí)現(xiàn)
SSE 要求服務(wù)器與瀏覽器保持連接寸宵。對于不同的服務(wù)器軟件來說崖面，所消耗的資源是不一樣的元咙。Apache 服務(wù)器，每個(gè)連接就是一個(gè)線程巫员，如果要維持大量連接蛾坯，勢必要消耗大量資源。Node 則是所有連接都使用同一個(gè)線程疏遏，因此消耗的資源會小得多脉课，但是這要求每個(gè)連接不能包含很耗時(shí)的操作，比如磁盤的 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代碼實(shí)現(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代碼實(shí)現(xiàn)
實(shí)現(xiàn)由兩部分組成：一部分是用來產(chǎn)生數(shù)據(jù)的 org.eclipse.jetty.servlets.EventSource 接口的實(shí)現(xiàn)倘零，另一部分是作為瀏覽器訪問端點(diǎn)的繼承自 org.eclipse.jetty.servlets.EventSourceServlet 類的 servlet 實(shí)現(xiàn)。
需要實(shí)現(xiàn) EventSource 接口的 onOpen戳寸、onResume 和 onClose 方法呈驶，其中 onOpen 方法在瀏覽器端的連接打開的時(shí)候被調(diào)用，onResume 方法在瀏覽器端重新建立連接時(shí)被調(diào)用疫鹊，onClose 方法則在瀏覽器關(guān)閉連接的時(shí)候被調(diào)用袖瞻。onOpen 和 onResume 方法都有一個(gè) EventSource.Emitter 接口類型的參數(shù)，可以用來發(fā)送數(shù)據(jù)拆吆。EventSource.Emitter 接口中包含的方法包括 data聋迎、event、comment枣耀、id 和 close 等澜术，分別對應(yīng)于通訊協(xié)議中各種不同類型的事件厨内。而 onResume 方法還額外包含一個(gè)參數(shù) lastEventId裙秋，表示通過 Last-Event-ID 頭發(fā)送過來的最近一次事件的標(biāo)識符桥狡。
EventSource 類對應(yīng)的 servlet 實(shí)現(xiàn)比較簡單，只需要繼承自 EventSourceServlet 類并覆寫 newEventSource 方法即可颅围。在 newEventSource 方法的實(shí)現(xiàn)中伟葫，需要返回一個(gè) MovementEventSource 類的對象
IE 支持
使用瀏覽器原生的 EventSource 對象的一個(gè)比較大的問題是 IE 并不提供支持。為了在 IE 上提供同樣的支持院促，一般有兩種辦法筏养。第一種辦法是在其他瀏覽器上使用原生 EventSource 對象，而在 IE 上則使用簡易輪詢或 COMET 技術(shù)來實(shí)現(xiàn)一疯；另外一種做法是使用 polyfill 技術(shù)撼玄，即使用第三方提供的 JavaScript 庫來屏蔽瀏覽器的不同。本文使用的是 polyfill 技術(shù)墩邀，只需要在頁面中加載第三方 JavaScript 庫即可掌猛。應(yīng)用本身的瀏覽器端代碼并不需要進(jìn)行改動(dòng)。一般推薦使用第二種做法，因?yàn)檫@樣的話荔茬，在服務(wù)器端只需要使用一種實(shí)現(xiàn)技術(shù)即可废膘。
在 IE 上提供類似原生 EventSource 對象的實(shí)現(xiàn)并不簡單。理論上來說慕蔚，只需要通過 XMLHttpRequest 對象來獲取服務(wù)器端的響應(yīng)內(nèi)容丐黄，并通過文本解析，就可以提取出相應(yīng)的事件孔飒，并觸發(fā)對應(yīng)的事件處理方法灌闺。不過問題在于 IE 上的 XMLHttpRequest 對象并不支持獲取部分的響應(yīng)內(nèi)容。只有在響應(yīng)完成之后坏瞄，才能獲取其內(nèi)容桂对。由于服務(wù)器端推送事件使用的是一個(gè)長連接。當(dāng)連接一直處于打開狀態(tài)時(shí)鸠匀，通過 XMLHttpRequest 對象并不能獲取響應(yīng)的內(nèi)容蕉斜，也就無法觸發(fā)對應(yīng)的事件。更具體的來說缀棍，當(dāng) XMLHttpRequest 對象的 readyState 為 3（READYSTATE_INTERACTIVE）時(shí)宅此，其 responseText 屬性是無法獲取的。
為了解決 IE 上 XMLHttpRequest 對象的問題爬范，就需要使用 IE 8 中引入的 XDomainRequest 對象父腕。XDomainRequest 對象的作用是發(fā)出跨域的 AJAX 請求。XDomainRequest 對象提供了 onprogress 事件坦敌。當(dāng) onprogress 事件發(fā)生時(shí)侣诵，可以通過 responseText 屬性來獲取到響應(yīng)的部分內(nèi)容痢法。這是 XDomainRequest 對象和 XMLHttpRequest 對象的最大不同狱窘，也是使用 XDomainRequest 對象來實(shí)現(xiàn)類似原生 EventSource 對象的基礎(chǔ)。在使用 XDomainRequest 對象打開與服務(wù)器端的連接之后财搁，當(dāng)服務(wù)器端有新的數(shù)據(jù)產(chǎn)生時(shí)蘸炸，可以通過 XDomainRequest 對象的 onprogress 事件的處理方法來進(jìn)行處理，對接收到的數(shù)據(jù)進(jìn)行解析尖奔，根據(jù)數(shù)據(jù)的內(nèi)容觸發(fā)相應(yīng)的事件搭儒。
不過由于 XDomainRequest 對象本來的目的是發(fā)出跨域 AJAX 請求，考慮到跨域訪問的安全性問題提茁，XDomainRequest 對象在使用時(shí)的限制也比較嚴(yán)格淹禾。這些限制會影響到其作為 EventSource 對象的實(shí)現(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 請求時(shí)嫁艇，服務(wù)器端使用的框架泉坐，如 servlet，不會對 POST 請求的內(nèi)容進(jìn)行自動(dòng)解析裳仆，無法使用 HttpServletRequest 類的 getParameter 方法來獲取 POST 請求的內(nèi)容腕让。只能在服務(wù)器端對原始的請求內(nèi)容進(jìn)行解析，獲取到其中的參數(shù)的值歧斟。
- XDomainRequest 對象發(fā)出的請求中不包含任何與用戶認(rèn)證相關(guān)的信息纯丸，包括 cookie 等。這就意味著静袖，如果服務(wù)器端需要認(rèn)證觉鼻，則需要通過 HTTP 請求的其他方式來傳遞用戶的認(rèn)證信息，比如 session 的 ID 等队橙。
由于 XDomainRequest 對象的這些限制坠陈，服務(wù)器端的實(shí)現(xiàn)也需要作出相應(yīng)的改動(dòng)。這些改動(dòng)包括返回 Access-Control-Allow-Origin 頭捐康；對于瀏覽器端發(fā)送的“text/plain”類型的參數(shù)進(jìn)行解析仇矾；處理請求中包含的用戶認(rèn)證相關(guān)的信息。
本文的示例使用的 polyfill 庫是 GitHub 上的 Yaffle 開發(fā)的 EventSource 項(xiàng)目解总，具體的地址見參考資源贮匕。在使用該 polyfill 庫，并對服務(wù)器端的實(shí)現(xiàn)進(jìn)行修改之后花枫，就可以在 IE 8 及以上的瀏覽器中使用服務(wù)器推送事件刻盐。如果需要支持 IE 7，則只能使用簡易輪詢或 COMET 技術(shù)劳翰。本文的示例代碼見參考資源敦锌。
