概述
服務(wù)端向瀏覽器推送信息，除了WebSocket之外，我們還可以使用另外一種技術(shù)SSE，即Server-Sent Events（以下簡稱SSE）。在我們處理有些瀏覽器的耗時任務(wù)時，比如導(dǎo)出Excel，密集型復(fù)雜計算，任務(wù)進(jìn)度控制，支付回調(diào)等待處理等，我們都需要異步在適合的時候?qū)⑾⑼扑徒o瀏覽器（單向）。
嚴(yán)格來說，HTTP協(xié)議無法做到服務(wù)器主動推送消息給瀏覽器，因為它是短連接的，但有一種變通方法，就是服務(wù)器先瀏覽器申明，接下來要發(fā)送的是流信息。也就是說，發(fā)送的不是一次性的數(shù)據(jù)包，而是一個數(shù)據(jù)流，會連續(xù)不斷地發(fā)送過來。這時，客戶端不會關(guān)閉連接，會一直等著服務(wù)器發(fā)過來的新的數(shù)據(jù)流，視頻播放就是這樣的例子。本質(zhì)上，這種通信就是以流信息的方式，完成一次用時很長的下載。
SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。它基于 HTTP 協(xié)議，目前除了 IE/Edge，其他瀏覽器都支持。在IE瀏覽器里，你可以使用polyfill，那么你就可以在IE10+（含IE10）中SSE技術(shù)。它比WebSocket更輕量，更簡單。
與WebSocket相比
SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務(wù)器之間的通信渠道，然后服務(wù)器向瀏覽器推送信息。WebSocket 更強大和靈活。因為它是全雙工通道，可以雙向通信；SSE 是單向通道，只能服務(wù)器向瀏覽器發(fā)送，因為流信息本質(zhì)上就是下載。如果瀏覽器向服務(wù)器發(fā)送信息，就變成了另一次 HTTP 請求。那么，相比WebSocket，兩者都支持跨域，那么，SSE有哪些優(yōu)點呢？
-
SSE使用HTTP協(xié)議，現(xiàn)有的服務(wù)器軟件都支持。WebSocket是一個獨立協(xié)議。 -
SSE屬于輕量級，使用簡單；WebSocket協(xié)議相對復(fù)雜。 -
SSE默認(rèn)支持?jǐn)嗑€重連，WebSocket需要自己實現(xiàn)。 -
SSE一般只用來傳送文本，二進(jìn)制數(shù)據(jù)需要編碼后傳送，WebSocket默認(rèn)支持傳送二進(jìn)制數(shù)據(jù)。 -
SSE支持自定義發(fā)送的消息類型，實現(xiàn)起來更為簡潔。
所以，兩者的使用具體還是根據(jù)業(yè)務(wù)場景，比如SSE不能用于全雙工通信使用場景，比如實時聊天系統(tǒng)等。
客戶端API
SSE客戶端的代碼使用EventSource對象，比起websocket，客戶端代碼連接SSE服務(wù)只需幾行代碼：
//檢測EventSource對象瀏覽器是否支持
if (!!window.EventSource) {
//連接SSE服務(wù)，也支持跨域
var source = new EventSource('/sse');
//偵聽服務(wù)端推送消息
source.addEventListener('message', function(e) {
console.log("onmessage",e.data);
});
//偵聽SSE服務(wù)連接信息
source.addEventListener('open', function(e) {
}, false);
//偵聽錯誤信息
source.addEventListener('error', function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log("連接關(guān)閉");
} else {
console.log("error:",e);
source.close();
}
}, false);
} else {
console.log("你的瀏覽器不支持SSE");
}
但SSE跨域時，跨域指定EventSource的第二個參數(shù)，發(fā)送Cookies信息如下：
var source = new EventSource(url, { withCredentials: true });
EventSource實例的readyState屬性，表明連接的當(dāng)前狀態(tài)。該屬性只讀，可以取以下值。
- 0：相當(dāng)于常量
EventSource.CONNECTING，表示連接還未建立，或者斷線正在重連。 - 1：相當(dāng)于常量
EventSource.OPEN，表示連接已經(jīng)建立，可以接受數(shù)據(jù)。 - 2：相當(dāng)于常量
EventSource.CLOSED，表示連接已斷，且不會重連。
客戶端也支持服務(wù)端發(fā)過來的自定義事件，比如偵聽SSE的foo事件代碼如下：
source.addEventListener('foo', function (event) {
var data = event.data;
// handle message
}, false);
至于服務(wù)端如何發(fā)送自定義事件，繼續(xù)往下看。
服務(wù)端實現(xiàn)
服務(wù)端向客戶端發(fā)送的數(shù)據(jù)是UTF-8編碼的文本，HTTP頭信息如下：
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
我們可以看到服務(wù)端發(fā)送到客戶端的響應(yīng)頭必須是text/event-stream，在您以前開發(fā)RestfulAPI時，它可能是application/json或text/plain等。
每次發(fā)送的消息，由若干個message組成，每個message之間用\n\n分隔。每個message內(nèi)部由若干行組成，每一行都是如下格式。
[field]: value\n
上面的field可以取四個值：data，event，id，retry，還可以用冒號打頭，表示注釋，一般來說，服務(wù)端每隔一段時間就會向瀏覽器發(fā)送一個注釋，保持連接不中斷，你無需執(zhí)行處理斷線重連。比如我們向客戶端推送進(jìn)度例子如下，每隔1s推送一條，服務(wù)端代碼：
private ExecutorService nonBlockingService = Executors.newCachedThreadPool();
@GetMapping("/sse")
public SseEmitter handleSse() {
SseEmitter emitter = new SseEmitter();
nonBlockingService.execute(() -> {
try {
for (int i = 0; i < 5; i++) {
emitter.send("當(dāng)前進(jìn)度 @ " + (i+1)*20 + "%");
//模擬耗時任務(wù)
Thread.sleep(1000);
}
emitter.complete();
} catch (Exception ex) {
ex.printStackTrace();
emitter.completeWithError(ex);
}
});
return emitter;
}
客戶端收到的消息：
看一下客戶端的請求頭：
那么如何發(fā)送自定義事件給客戶端端呢，非常簡單：
SseEventBuilder event = SseEmitter.event().data((i+1)*20)
.id(String.valueOf(i)).name("foo");
emitter.send(event);
客戶端收到：
注：以上代碼同時標(biāo)注了消息ID，瀏覽器用lastEventId屬性讀取這個值。一旦連接斷線，瀏覽器會發(fā)送一個 HTTP 頭，里面包含一個特殊的Last-Event-ID頭信息，將這個值發(fā)送回來，用來幫助服務(wù)器端重建連接。因此，這個頭信息可以被視為一種同步機制。
也可以通過設(shè)置reconnectTime(100000)來設(shè)置重啟發(fā)起連接的時間間隔，兩種情況會導(dǎo)致瀏覽器重新發(fā)起連接：一種是時間間隔到期，二是由于網(wǎng)絡(luò)錯誤等原因，導(dǎo)致連接出錯。
好了，說了那么多，相信您對SSE技術(shù)有了全面的了解，同時，也請了解該技術(shù)使用的業(yè)務(wù)場景，可不能亂用哦~
