概述
服務(wù)端向瀏覽器推送信息，除了WebSocket之外貌亭，我們還可以使用另外一種技術(shù)SSE柬唯，即Server-Sent Events（以下簡稱SSE）。在我們處理有些瀏覽器的耗時任務(wù)時圃庭，比如導(dǎo)出Excel锄奢，密集型復(fù)雜計算，任務(wù)進度控制剧腻，支付回調(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一般只用來傳送文本祠乃，二進制數(shù)據(jù)需要編碼后傳送梦重，WebSocket默認(rè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í)行處理斷線重連。比如我們向客戶端推送進度例子如下宠漩，每隔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)前進度 @ " + (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ù)場景愚铡，可不能亂用哦~
