SSE：服務器發送事件,使用長連接進行通信

概述

傳統的網頁都是瀏覽器向服務器「查詢」數據，可是不少場合，最有效的方式是服務器向瀏覽器「發送」數據。好比，每當收到新的電子郵件，服務器就向瀏覽器發送一個「通知」，這要比瀏覽器按時向服務器查詢（polling）更有效率。

服務器發送事件（Server-Sent Events，簡稱SSE）就是爲了解決這個問題，而提出的一種新API，部署在EventSource對象上。目前，除了IE，其餘主流瀏覽器都支持。

簡單說，所謂SSE，就是瀏覽器向服務器發送一個HTTP請求，而後服務器不斷單向地向瀏覽器推送「信息」（message）。這種信息在格式上很簡單，就是「信息」加上前綴「data: 」，而後以「\n\n」結尾。

SSE與WebSocket有類似功能，都是用來創建瀏覽器與服務器之間的通訊渠道。二者的區別在於：

• WebSocket是全雙工通道，能夠雙向通訊，功能更強；SSE是單向通道，只能服務器向瀏覽器端發送。

• WebSocket是一個新的協議，須要服務器端支持；SSE則是部署在HTTP協議之上的，現有的服務器軟件都支持。

• SSE是一個輕量級協議，相對簡單；WebSocket是一種較重的協議，相對複雜。

• SSE默認支持斷線重連，WebSocket則須要額外部署。

• SSE支持自定義發送的數據類型。

從上面的比較能夠看出，二者各有特色，適合不一樣的場合。

客戶端代碼

概述

首先，使用下面的代碼，檢測瀏覽器是否支持SSE。

if (!!window.EventSource) {
  // ...
}

而後，部署SSE大概以下。

var source = new EventSource('/dates');

source.onmessage = function(e){
  console.log(e.data);
};

// 或者

source.addEventListener('message', function(e){})

創建鏈接

首先，瀏覽器向服務器發起鏈接，生成一個EventSource的實例對象。

var source = new EventSource(url);

參數url就是服務器網址，必須與當前網頁的網址在同一個網域（domain），並且協議和端口都必須相同。

下面是一個創建鏈接的實例。

if (!!window.EventSource) {
  var source = new EventSource('http://127.0.0.1/sses/');
}

新生成的EventSource實例對象，有一個readyState屬性，代表鏈接所處的狀態。

source.readyState

它能夠取如下值：

• 0，至關於常量EventSource.CONNECTING，表示鏈接還未創建，或者鏈接斷線。

• 1，至關於常量EventSource.OPEN，表示鏈接已經創建，能夠接受數據。

• 2，至關於常量EventSource.CLOSED，表示鏈接已斷，且不會重連。

open事件

鏈接一旦創建，就會觸發open事件，能夠定義相應的回調函數。

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

// 或者

source.addEventListener("open", function(event) {
  // handle open event
}, false);

message事件

收到數據就會觸發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);

參數對象event有以下屬性：

• data：服務器端傳回的數據（文本格式）。

• origin： 服務器端URL的域名部分，即協議、域名和端口。

• lastEventId：數據的編號，由服務器端發送。若是沒有編號，這個屬性爲空。

error事件

若是發生通訊錯誤（好比鏈接中斷），就會觸發error事件。

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

// 或者

source.addEventListener("error", function(event) {
  // handle error event
}, false);

自定義事件

服務器能夠與瀏覽器約定自定義事件。這種狀況下，發送回來的數據不會觸發message事件。

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

上面代碼表示，瀏覽器對foo事件進行監聽。

close方法

close方法用於關閉鏈接。

source.close();

數據格式

概述

服務器端發送的數據的HTTP頭信息以下：

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

後面的行都是以下格式：

field: value\n

field能夠取四個值：「data」, 「event」, 「id」, or 「retry」，也就是說有四類頭信息。每次HTTP通訊能夠包含這四類頭信息中的一類或多類。\n表明換行符。

以冒號開頭的行，表示註釋。一般，服務器每隔一段時間就會向瀏覽器發送一個註釋，保持鏈接不中斷。

: 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：數據欄

數據內容用data表示，能夠佔用一行或多行。若是數據只有一行，則像下面這樣，以「\n\n」結尾。

data:  message\n\n

若是數據有多行，則最後一行用「\n\n」結尾，前面行都用「\n」結尾。

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

總之，最後一行的data，結尾要用兩個換行符號，表示數據結束。

以發送JSON格式的數據爲例。

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

id：數據標識符

數據標識符用id表示，至關於每一條數據的編號。

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

瀏覽器用lastEventId屬性讀取這個值。一旦鏈接斷線，瀏覽器會發送一個HTTP頭，裏面包含一個特殊的「Last-Event-ID」頭信息，將這個值發送回來，用來幫助服務器端重建鏈接。所以，這個頭信息能夠被視爲一種同步機制。

event欄：自定義信息類型

event頭信息表示自定義的數據類型，或者說數據的名字。

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

retry：最大間隔時間

瀏覽器默認的是，若是服務器端三秒內沒有發送任何信息，則開始重連。服務器端能夠用retry頭信息，指定通訊的最大間隔時間。

retry: 10000\n

服務器代碼

服務器端發送事件，要求服務器與瀏覽器保持鏈接。對於不一樣的服務器軟件來講，所消耗的資源是不同的。Apache服務器，每一個鏈接就是一個線程，若是要維持大量鏈接，勢必要消耗大量資源。Node.js則是全部鏈接都使用同一個線程，所以消耗的資源會小得多，可是這要求每一個鏈接不能包含很耗時的操做，好比磁盤的IO讀寫。

下面是Node.js的服務器發送事件的代碼實例。

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"});
        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);

        req.connection.addListener("close", function () {
            clearInterval(interval);
        }, false);
  }
}).listen(80, "127.0.0.1");

PHP代碼實例。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // 建議不要緩存SSE數據

/**
 * 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()));