HTML5支持服務(wù)器發(fā)送事件

傳統(tǒng)的WEB應(yīng)用程序通信時(shí)的簡(jiǎn)單時(shí)序圖：

現(xiàn)在Web App中，大都有Ajax，是這樣子：

HTML5有一個(gè)Server-Sent Events(SSE)功能，允許服務(wù)端推送數(shù)據(jù)到客戶端。(通常叫數(shù)據(jù)推送)?；跀?shù)據(jù)推送是這樣的，當(dāng)數(shù)據(jù)源有新數(shù)據(jù)，它馬上發(fā)送到客戶端，不需要等待客戶端請(qǐng)求。這些新數(shù)據(jù)可能是最新聞，最新股票行情，來自朋友的聊天信息，天氣預(yù)報(bào)等。

數(shù)據(jù)拉與推的功能是一樣的，用戶拿到新數(shù)據(jù)。但數(shù)據(jù)推送有一些優(yōu)勢(shì)。 你可能聽說過Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets與SSE是不同的技術(shù)。可能最大的優(yōu)勢(shì)是低延遲。SSE用于web應(yīng)用程序刷新數(shù)據(jù)，不需要用戶做任何動(dòng)作。
你可能聽說過HTML5的WebSockets，也能推送數(shù)據(jù)到客戶端。WebSockets是實(shí)現(xiàn)服務(wù)端更加復(fù)雜的技術(shù)，但它是真的全雙工socket, 服務(wù)端能推送數(shù)據(jù)到客戶端，客戶端也能推送數(shù)據(jù)回服務(wù)端。SSE工作于存在HTTP/HTTPS協(xié)議，支持代理服務(wù)器與認(rèn)證技術(shù)。SSE是文本協(xié)議你能輕易的調(diào)試它。如果你需要發(fā)送大部二進(jìn)制數(shù)據(jù)從服務(wù)端到客戶端，WebSocket是更好的選擇。關(guān)于SSE與WebSocket的區(qū)別，本文下面會(huì)講到。

HTML5 服務(wù)器發(fā)送事件（server-sent event）允許網(wǎng)頁(yè)獲得來自服務(wù)器的更新
Server-Sent 事件 – 單向消息傳遞
Server-Sent 事件指的是網(wǎng)頁(yè)自動(dòng)獲取來自服務(wù)器的更新。
以前也可能做到這一點(diǎn)，前提是網(wǎng)頁(yè)不得不詢問是否有可用的更新。通過服務(wù)器發(fā)送事件，更新能夠自動(dòng)到達(dá)。
例子：Facebook/Twitter 更新、估價(jià)更新、新的博文、賽事結(jié)果等。

瀏覽器支持（所有主流瀏覽器均支持服務(wù)器發(fā)送事件，除了 Internet Explorer。）

EventSource 推送（ajax普通輪詢）:

處理過程：

客戶端建立EventSource對(duì)象，對(duì)服務(wù)器通過http協(xié)議不斷進(jìn)行請(qǐng)求。服務(wù)器對(duì)客戶端的響應(yīng)數(shù)據(jù)格式有四部分構(gòu)成，event，data，id，空格行。客戶端接收到服務(wù)器端的響應(yīng)數(shù)據(jù)之后，根據(jù)event事件值，找到EventSource對(duì)象對(duì)應(yīng)的事件監(jiān)聽器。

接收 Server-Sent 事件通知
EventSource 對(duì)象用于接收服務(wù)器發(fā)送事件通知：

    //創(chuàng)建一個(gè)新的 EventSource 對(duì)象，規(guī)定發(fā)送更新的頁(yè)面的 URL      var source = new EventSource("../api/MyAPI/ServerSentEvents");    //默認(rèn)支持message事件      source.onmessage = function (event) {          console.log(source.readyState);          console.log(event);      };

實(shí)例解析：
　　創(chuàng)建一個(gè)新的 EventSource 對(duì)象，然后規(guī)定發(fā)送更新的頁(yè)面的 URL（本例中是 "demo_sse.php"），參數(shù)url就是服務(wù)器網(wǎng)址，必須與當(dāng)前網(wǎng)頁(yè)的網(wǎng)址在同一個(gè)網(wǎng)域（domain），而且協(xié)議和端口都必須相同。
　　每接收到一次更新，就會(huì)發(fā)生 onmessage 事件

檢測(cè) Server-Sent 事件支持
以下實(shí)例，我們編寫了一段額外的代碼來檢測(cè)服務(wù)器發(fā)送事件的瀏覽器支持情況：

if(!!EventSource && typeof(EventSource)!=="undefined")  {    // 瀏覽器支持 Server-Sent      // 一些代碼.....}else{    // 瀏覽器不支持 Server-Sent..}

服務(wù)器端代碼實(shí)例
為了讓上面的例子可以運(yùn)行，您還需要能夠發(fā)送數(shù)據(jù)更新的服務(wù)器（比如 PHP、ASP、ASP.NET、Java）。
服務(wù)器端事件流的語(yǔ)法是非常簡(jiǎn)單的。你需要把 "Content-Type" 報(bào)頭設(shè)置為 "text/event-stream"?，F(xiàn)在，您可以開始發(fā)送事件流了。
我只會(huì)C#，所以用 ASP.NET的MVC 里面的ApiController寫了個(gè)最簡(jiǎn)單的服務(wù)器端：

    public class MyAPIController : ApiController      {        /// <summary>          /// ...api/MyAPI/ServerSentEvents        /// </summary>          /// <returns></returns>        [HttpGet, HttpPost]        public Task<HttpResponseMessage> ServerSentEvents()          {            //Response.ContentType = "text/event-stream"            //Response.Expires = -1            //Response.Write("data: " & now())            //Response.Flush()                            string data = "id: 123456nevent: messagendata: 666nn";                HttpResponseMessage response = new HttpResponseMessage              {                //注意：ContentType = "text/event-stream"                  Content = new StringContent(data, Encoding.GetEncoding("UTF-8"), "text/event-stream")              };            return Task.FromResult(response);          }      }

代碼解釋:
　　把報(bào)頭 "Content-Type" 設(shè)置為 "text/event-stream"
　　規(guī)定不對(duì)頁(yè)面進(jìn)行緩存
　　輸出發(fā)送日期（始終以 "data: " 開頭）
　　向網(wǎng)頁(yè)刷新輸出數(shù)據(jù)

EventSource 對(duì)象

新生成的EventSource實(shí)例對(duì)象，有一個(gè)readyState屬性，表明連接所處的狀態(tài)。

source.readyState
它可以取以下值：

　　0，相當(dāng)于常量EventSource.CONNECTING，表示連接還未建立，或者連接斷線。

　　1，相當(dāng)于常量EventSource.OPEN，表示連接已經(jīng)建立，可以接受數(shù)據(jù)。

　　2，相當(dāng)于常量EventSource.CLOSED，表示連接已斷，且不會(huì)重連。

在上面的例子中，我們使用 onmessage 事件來獲取消息。不過還可以使用其他事件：
事件　　　　描述
onopen 　　當(dāng)通往服務(wù)器的連接被打開
onmessage 當(dāng)接收到消息
onerror 　　當(dāng)發(fā)生錯(cuò)誤

open事件

連接一旦建立，就會(huì)觸發(fā)open事件，可以定義相應(yīng)的回調(diào)函數(shù)。

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

// 或者

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

收到數(shù)據(jù)就會(huì)觸發(fā)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);
參數(shù)對(duì)象event有如下屬性：

data：服務(wù)器端傳回的數(shù)據(jù)（文本格式）。

origin： 服務(wù)器端URL的域名部分，即協(xié)議、域名和端口。

lastEventId：數(shù)據(jù)的編號(hào)，由服務(wù)器端發(fā)送。如果沒有編號(hào)，這個(gè)屬性為空。

error事件

如果發(fā)生通信錯(cuò)誤（比如連接中斷），就會(huì)觸發(fā)error事件。

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

// 或者

source.addEventListener("error", function(event) {
// handle error event
}, false);
自定義事件

服務(wù)器可以與瀏覽器約定自定義事件。這種情況下，發(fā)送回來的數(shù)據(jù)不會(huì)觸發(fā)message事件。

source.addEventListener("foo", function(event) {
var data = event.data;
var origin = event.origin;
var lastEventId = event.lastEventId;
// handle message
}, false);
上面代碼表示，瀏覽器對(duì)foo事件進(jìn)行監(jiān)聽。

close方法

close方法用于關(guān)閉連接。

source.close();
數(shù)據(jù)格式
概述

服務(wù)器端發(fā)送的數(shù)據(jù)的HTTP頭信息如下：

Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
后面的行都是如下格式：

field: valuen
field可以取四個(gè)值：“data”, “event”, “id”, or “retry”，也就是說有四類頭信息。每次HTTP通信可以包含這四類頭信息中的一類或多類。n代表?yè)Q行符。

以冒號(hào)開頭的行，表示注釋。通常，服務(wù)器每隔一段時(shí)間就會(huì)向?yàn)g覽器發(fā)送一個(gè)注釋，保持連接不中斷。

: This is a comment
下面是一些例子。

: this is a test streamnn

data: some textnn

data: another messagen
data: with two lines nn
data：數(shù)據(jù)欄

數(shù)據(jù)內(nèi)容用data表示，可以占用一行或多行。如果數(shù)據(jù)只有一行，則像下面這樣，以“nn”結(jié)尾。

data: messagenn
如果數(shù)據(jù)有多行，則最后一行用“nn”結(jié)尾，前面行都用“n”結(jié)尾。

data: begin messagen
data: continue messagenn
總之，最后一行的data，結(jié)尾要用兩個(gè)換行符號(hào)，表示數(shù)據(jù)結(jié)束。

以發(fā)送JSON格式的數(shù)據(jù)為例。

data: {n
data: "foo": "bar",n
data: "baz", 555n
data: }nn
id：數(shù)據(jù)標(biāo)識(shí)符

數(shù)據(jù)標(biāo)識(shí)符用id表示，相當(dāng)于每一條數(shù)據(jù)的編號(hào)。

id: msg1n
data: messagenn
瀏覽器用lastEventId屬性讀取這個(gè)值。一旦連接斷線，瀏覽器會(huì)發(fā)送一個(gè)HTTP頭，里面包含一個(gè)特殊的“Last-Event-ID”頭信息，將這個(gè)值發(fā)送回來，用來幫助服務(wù)器端重建連接。因此，這個(gè)頭信息可以被視為一種同步機(jī)制。

event欄：自定義信息類型

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

event: foon
data: a foo eventnn

data: an unnamed eventnn

event: barn
data: a bar eventnn
上面的代碼創(chuàng)造了三條信息。第一條是foo，觸發(fā)瀏覽器端的foo事件；第二條未取名，表示默認(rèn)類型，觸發(fā)瀏覽器端的message事件；第三條是bar，觸發(fā)瀏覽器端的bar事件。

retry：最大間隔時(shí)間

瀏覽器默認(rèn)的是，如果服務(wù)器端三秒內(nèi)沒有發(fā)送任何信息，則開始重連。服務(wù)器端可以用retry頭信息，指定通信的最大間隔時(shí)間。

retry: 10000n

————————————————————————————–

規(guī)范
Server-sent Events 規(guī)范是 HTML 5 規(guī)范的一個(gè)組成部分，具體的規(guī)范文檔見參考資源。該規(guī)范比較簡(jiǎn)單，主要由兩個(gè)部分組成：第一個(gè)部分是服務(wù)器端與瀏覽器端之間的通訊協(xié)議，第二部分則是在瀏覽器端可供 JavaScript 使用的 EventSource 對(duì)象。通訊協(xié)議是基于純文本的簡(jiǎn)單協(xié)議。服務(wù)器端的響應(yīng)的內(nèi)容類型是“text/event-stream”。響應(yīng)文本的內(nèi)容可以看成是一個(gè)事件流，由不同的事件所組成。每個(gè)事件由類型和數(shù)據(jù)兩部分組成，同時(shí)每個(gè)事件可以有一個(gè)可選的標(biāo)識(shí)符。不同事件的內(nèi)容之間通過僅包含回車符和換行符的空行（“rn”）來分隔。每個(gè)事件的數(shù)據(jù)可能由多行組成。代碼清單 1 給出了服務(wù)器端響應(yīng)的示例：

retry: 10000n  event: messagen  id: 636307190866448426n  data: 2017/05/18 15:44:46nn

Chrome瀏覽器監(jiān)視視圖：

響應(yīng)報(bào)文頭部：

響應(yīng)報(bào)文內(nèi)容：

每個(gè)事件之間通過空行來分隔。對(duì)于每一行來說，冒號(hào)（“:”）前面表示的是該行的類型，冒號(hào)后面則是對(duì)應(yīng)的值?？赡艿念愋桶ǎ?br />類型為空白，表示該行是注釋，會(huì)在處理時(shí)被忽略。
類型為 data，表示該行包含的是數(shù)據(jù)。以 data 開頭的行可以出現(xiàn)多次。所有這些行都是該事件的數(shù)據(jù)。
類型為 event，表示該行用來聲明事件的類型。瀏覽器在收到數(shù)據(jù)時(shí)，會(huì)產(chǎn)生對(duì)應(yīng)類型的事件。
類型為 id，表示該行用來聲明事件的標(biāo)識(shí)符。
類型為 retry，表示該行用來聲明瀏覽器在連接斷開之后進(jìn)行再次連接之前的等待時(shí)間。

當(dāng)有多行數(shù)據(jù)時(shí)，實(shí)際的數(shù)據(jù)由每行數(shù)據(jù)以換行符連接而成。
如果服務(wù)器端返回的數(shù)據(jù)中包含了事件的標(biāo)識(shí)符，瀏覽器會(huì)記錄最近一次接收到的事件的標(biāo)識(shí)符。如果與服務(wù)器端的連接中斷，當(dāng)瀏覽器端再次進(jìn)行連接時(shí)，會(huì)通過 HTTP 頭“Last-Event-ID”來聲明最后一次接收到的事件的標(biāo)識(shí)符。服務(wù)器端可以通過瀏覽器端發(fā)送的事件標(biāo)識(shí)符來確定從哪個(gè)事件開始來繼續(xù)連接。
對(duì)于服務(wù)器端返回的響應(yīng)，瀏覽器端需要在 JavaScript 中使用 EventSource 對(duì)象來進(jìn)行處理。EventSource 使用的是標(biāo)準(zhǔn)的事件監(jiān)聽器方式，只需要在對(duì)象上添加相應(yīng)的事件處理方法即可。EventSource 提供了三個(gè)標(biāo)準(zhǔn)事件：

EventSource 對(duì)象提供的標(biāo)準(zhǔn)事件
名稱 　　說明 　　事件處理方法
open 　　當(dāng)成功與服務(wù)器建立連接時(shí)產(chǎn)生 onopen
message 當(dāng)收到服務(wù)器發(fā)送的事件時(shí)產(chǎn)生 onmessage
error 　　當(dāng)出現(xiàn)錯(cuò)誤時(shí)產(chǎn)生 onerror

而且，服務(wù)器端可以返回自定義類型的事件。對(duì)于這些事件，可以使用 addEventListener 方法來添加相應(yīng)的事件處理方法：

var es = new EventSource('events');  es.onmessage = function(e) {      console.log(e.data);  };//自定義事件 myeventes.addEventListener('myevent', function(e) {      console.log(e.data);  });

在指定 URL 創(chuàng)建出 EventSource 對(duì)象之后，可以通過 onmessage 和 addEventListener 方法來添加事件處理方法。當(dāng)服務(wù)器端有新的事件產(chǎn)生，相應(yīng)的事件處理方法會(huì)被調(diào)用。EventSource 對(duì)象的 onmessage 屬性的作用類似于 addEventListener( ‘ message ’ )，不過 onmessage 屬性只支持一個(gè)事件處理方法。

傳統(tǒng)的網(wǎng)頁(yè)都是瀏覽器向服務(wù)器“查詢”數(shù)據(jù)，但是很多場(chǎng)合，最有效的方式是服務(wù)器向?yàn)g覽器“發(fā)送”數(shù)據(jù)。比如，每當(dāng)收到新的電子郵件，服務(wù)器就向?yàn)g覽器發(fā)送一個(gè)“通知”，這要比瀏覽器按時(shí)向服務(wù)器查詢（polling）更有效率。服務(wù)器發(fā)送事件（Server-Sent Events，簡(jiǎn)稱SSE）就是為了解決這個(gè)問題，而提出的一種新API，部署在EventSource對(duì)象上。目前，除了IE，其他主流瀏覽器都支持。
簡(jiǎn)單說，所謂SSE，就是瀏覽器向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求，然后服務(wù)器不斷單向地向?yàn)g覽器推送“信息”（message）。這種信息在格式上很簡(jiǎn)單，就是“信息”加上前綴“data: ”，然后以“nn”結(jié)尾。

SSE與WebSocket有相似功能，都是用來建立瀏覽器與服務(wù)器之間的通信渠道。兩者的區(qū)別在于：

　　WebSocket是全雙工通道，可以雙向通信，功能更強(qiáng)；SSE是單向通道，只能服務(wù)器向?yàn)g覽器端發(fā)送。

　　WebSocket是一個(gè)新的協(xié)議，需要服務(wù)器端支持；SSE則是部署在HTTP協(xié)議之上的，現(xiàn)有的服務(wù)器軟件都支持。

　　SSE是一個(gè)輕量級(jí)協(xié)議，相對(duì)簡(jiǎn)單；WebSocket是一種較重的協(xié)議，相對(duì)復(fù)雜。

　　SSE默認(rèn)支持?jǐn)嗑€重連，WebSocket則需要額外部署。

　　SSE支持自定義發(fā)送的數(shù)據(jù)類型。

從上面的比較可以看出，兩者各有特點(diǎn)，適合不同的場(chǎng)合。

個(gè)人完整的HTML5頁(yè)面和C#（MVC實(shí)現(xiàn)服務(wù)端代碼）如下：

前端HTML5頁(yè)面：

<!DOCTYPE html><html><head>      <meta charset="utf-8">      <title>HTML5 服務(wù)器發(fā)送事件(Server-Sent Events)-單向消息傳遞</title>      <meta name="author" content="熊仔其人" />      <meta name="generator" content="2017-05-18" /></head><body>      <h1>獲取服務(wù)端更新數(shù)據(jù)</h1>      <p id="result"></p><script>if(typeof(EventSource)!=="undefined")  {    //創(chuàng)建一個(gè)新的 EventSource 對(duì)象，規(guī)定發(fā)送更新的頁(yè)面的 URL      var source = new EventSource("../api/MyAPI/ServerSentEvents");    //默認(rèn)支持open事件    source.onopen = function (event) {          console.log(source.readyState);          console.log(event);      };    //默認(rèn)支持error事件    source.onerror = function (event) {          console.log(source.readyState);          console.log(event);      };    //默認(rèn)支持message事件    source.onmessage = function (event) {          console.log(source.readyState);          console.log(event);          document.getElementById("result").innerHTML += event.data + "<br>";      };    //處理服務(wù)器響應(yīng)報(bào)文中的自定義事件    source.addEventListener("CustomEvent", function (e) {          console.log("喚醒自定義事件");          console.log(e);          document.getElementById("result").innerHTML += e.data + "<br>";      });  }else{      document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";  }</script></body></html>

C#寫的服務(wù)器端：

using System;using System.Net.Http;using System.Text;using System.Threading.Tasks;using System.Web.Http;namespace WebTest.Controllers  {    /// <summary>      /// api/{controller}/{id}    /// </summary>      public class MyAPIController : ApiController      {        static readonly Random random = new Random();        /// <summary>          /// ...api/MyAPI/ServerSentEvents        /// </summary>          /// <returns></returns>        [HttpGet, HttpPost]        public Task<HttpResponseMessage> ServerSentEvents()          {            //Response.ContentType = "text/event-stream"            //Response.Expires = -1            //Response.Write("data: " & now())            //Response.Flush()                            string data = "";            if (random.Next(0, 10) % 3 == 0)              {                //喚醒自定義的CustomEvent                  data = ServerSentEventData("這是自定義通知", DateTime.Now.Ticks.ToString(), "CustomEvent");              }            else              {                //喚醒默認(rèn)的message                  data = ServerSentEventData(DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss"), DateTime.Now.Ticks.ToString());              }                HttpResponseMessage response = new HttpResponseMessage              {                //注意：ContentType = "text/event-stream"                  Content = new StringContent(data, Encoding.GetEncoding("UTF-8"), "text/event-stream")              };            return Task.FromResult(response);          }        public string ServerSentEventData(string data, string id, string _event = "message", long retry = 10000)          {              StringBuilder sb = new StringBuilder();              sb.AppendFormat("retry:{0}n", retry);              sb.AppendFormat("event:{0}n", _event);              sb.AppendFormat("id:{0}n", id);              sb.AppendFormat("data:{0}nn", data);            return sb.ToString();          }                }  }

通信在頁(yè)面上的顯示結(jié)果：

通過Chrome監(jiān)控網(wǎng)絡(luò)交互時(shí)序：

通過Chrome瀏覽器控制臺(tái)輸出，下面是一輪ope、message、error事件的詳情：

至此，大功告成。