摘要：服務器向瀏覽器推送信息，除了 WebSocket，還有一種方法：Server-Sent Events（以下簡稱 SSE）。本文介紹它的用法。一、SSE 的本質嚴格地說，HTTP 協議無法做到服務器主動...

服務器向瀏覽器推送信息，除了 WebSocket，還有一種方法：Server-Sent Events（以下簡稱 SSE）。本文介紹它的用法。

一、SSE 的本質

嚴格地說，HTTP 協議無法做到服務器主動推送信息。但是，有一種變通方法，就是服務器向客戶端聲明，接下來要發送的是流信息（streaming）。

也就是說，發送的不是一次性的數據包，而是一個數據流，會連續不斷地發送過來。這時，客戶端不會關閉連接，會一直等著服務器發過來的新的數據流，視頻播放就是這樣的例子。本質上，這種通信就是以流信息的方式，完成一次用時很長的下載。

SSE 就是利用這種機制，使用流信息向瀏覽器推送信息。它基于 HTTP 協議，目前除了 IE/Edge，其他瀏覽器都支持。

二、SSE 的特點

SSE 與 WebSocket 作用相似，都是建立瀏覽器與服務器之間的通信渠道，然后服務器向瀏覽器推送信息。

總體來說，WebSocket 更強大和靈活。因為它是全雙工通道，可以雙向通信；SSE 是單向通道，只能服務器向瀏覽器發送，因為流信息本質上就是下載。如果瀏覽器向服務器發送信息，就變成了另一次 HTTP 請求。

但是，SSE 也有自己的優點。

SSE 使用 HTTP 協議，現有的服務器軟件都支持。WebSocket 是一個獨立協議。

SSE 屬于輕量級，使用簡單；WebSocket 協議相對復雜。

SSE 默認支持斷線重連，WebSocket 需要自己實現。

SSE 一般只用來傳送文本，二進制數據需要編碼后傳送，WebSocket 默認支持傳送二進制數據。

SSE 支持自定義發送的消息類型。

因此，兩者各有特點，適合不同的場合。

三、客戶端 API

3.1 EventSource 對象

SSE 的客戶端 API 部署在EventSource對象上。下面的代碼可以檢測瀏覽器是否支持 SSE。

if ('EventSource' in window) {
  // ...
}

使用 SSE 時，瀏覽器首先生成一個EventSource實例，向服務器發起連接。

var source = new EventSource(url);

上面的url可以與當前網址同域，也可以跨域。跨域時，可以指定第二個參數，打開withCredentials屬性，表示是否一起發送 Cookie。

var source = new EventSource(url, { withCredentials: true });

EventSource實例的readyState屬性，表明連接的當前狀態。該屬性只讀，可以取以下值。

0：相當于常量EventSource.CONNECTING，表示連接還未建立，或者斷線正在重連。

1：相當于常量EventSource.OPEN，表示連接已經建立，可以接受數據。

2：相當于常量EventSource.CLOSED，表示連接已斷，且不會重連。

3.2 基本用法

連接一旦建立，就會觸發open事件，可以在onopen屬性定義回調函數。

source.onopen = function (event) {
  // ...
};

// 另一種寫法
source.addEventListener('open', function (event) {
  // ...
}, false);

客戶端收到服務器發來的數據，就會觸發message事件，可以在onmessage屬性的回調函數。

source.onmessage = function (event) {
  var data = event.data;
  // handle message
};

// 另一種寫法
source.addEventListener('message', function (event) {
  var data = event.data;
  // handle message
}, false);

上面代碼中，事件對象的data屬性就是服務器端傳回的數據（文本格式）。

如果發生通信錯誤（比如連接中斷），就會觸發error事件，可以在onerror屬性定義回調函數。

source.onerror = function (event) {
  // handle error event
};

// 另一種寫法
source.addEventListener('error', function (event) {
  // handle error event
}, false);

close方法用于關閉 SSE 連接。

source.close();

3.3 自定義事件

默認情況下，服務器發來的數據，總是觸發瀏覽器EventSource實例的message事件。開發者還可以自定義 SSE 事件，這種情況下，發送回來的數據不會觸發message事件。

source.addEventListener('foo', function (event) {
  var data = event.data;
  // handle message
}, false);

上面代碼中，瀏覽器對 SSE 的foo事件進行監聽。如何實現服務器發送foo事件，請看下文。

四、服務器實現

4.1 數據格式

服務器向瀏覽器發送的 SSE 數據，必須是 UTF-8 編碼的文本，具有如下的 HTTP 頭信息。

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

上面三行之中，第一行的Content-Type必須指定 MIME 類型為event-steam。

每一次發送的信息，由若干個message組成，每個message之間用\n\n分隔。每個message內部由若干行組成，每一行都是如下格式。

[field]: value\n

上面的field可以取四個值。

data
event
id
retry

此外，還可以有冒號開頭的行，表示注釋。通常，服務器每隔一段時間就會向瀏覽器發送一個注釋，保持連接不中斷。

: 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

4.2 data 字段

數據內容用data字段表示。

data:  message\n\n

如果數據很長，可以分成多行，最后一行用\n\n結尾，前面行都用\n結尾。

data: begin message\n
data: continue message\n\n

下面是一個發送 JSON 數據的例子。

data: {\n
data: "foo": "bar",\n
data: "baz", 555\n
data: }\n\n

4.3 id 字段

數據標識符用id字段表示，相當于每一條數據的編號。

id: msg1\n
data: message\n\n

瀏覽器用lastEventId屬性讀取這個值。一旦連接斷線，瀏覽器會發送一個 HTTP 頭，里面包含一個特殊的Last-Event-ID頭信息，將這個值發送回來，用來幫助服務器端重建連接。因此，這個頭信息可以被視為一種同步機制。

4.4 event 字段

event字段表示自定義的事件類型，默認是message事件。瀏覽器可以用addEventListener()監聽該事件。

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事件。

下面是另一個例子。

event: userconnect
data: {"username": "yzmcms", "time": "02:33:48"}

event: usermessage
data: {"username": "yzmcms", "time": "02:34:11", "text": "Hi everyone."}

event: userdisconnect
data: {"username": "yzmcms", "time": "02:34:23"}

event: usermessage
data: {"username": "sean", "time": "02:34:36", "text": "Hello, yzmcms."}

4.5 retry 字段

服務器可以用retry字段，指定瀏覽器重新發起連接的時間間隔。

retry: 10000\n

兩種情況會導致瀏覽器重新發起連接：一種是時間間隔到期，二是由于網絡錯誤等原因，導致連接出錯。

最后我寫了一個簡單的SSE聊天室的例子，大家可以看看 https://www.yzmask.com/chat