1. 程式人生 > >SSE:伺服器傳送事件,使用長連結進行通訊

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