HTML5支持服務器發送事件(Server-Sent Events)-單向消息傳遞數據推送（C#示例）

時間  2019-11-08
標籤 html5 html 支持 服務器 發送 事件 server sent events 單向 消息 傳遞 數據 推送 c# 示例 欄目 HTML5 简体版
原文   原文鏈接

傳統的WEB應用程序通訊時的簡單時序圖：php

如今Web App中，大都有Ajax，是這樣子：html

 

HTML5有一個Server-Sent Events(SSE)功能，容許服務端推送數據到客戶端。(一般叫數據推送)。基於數據推送是這樣的，當數據源有新數據，它立刻發送到客戶端，不須要等待客戶端請求。這些新數據多是最新聞，最新股票行情，來自朋友的聊天信息，天氣預報等。前端

數據拉與推的功能是同樣的，用戶拿到新數據。但數據推送有一些優點。 你可能據說過Comet, Ajax推送, 反向Ajax, HTTP流，WebSockets與SSE是不一樣的技術。可能最大的優點是低延遲。SSE用於web應用程序刷新數據，不須要用戶作任何動做。
你可能據說過HTML5的WebSockets，也能推送數據到客戶端。WebSockets是實現服務端更加複雜的技術，但它是真的全雙工socket, 服務端能推送數據到客戶端，客戶端也能推送數據回服務端。SSE工做於存在HTTP/HTTPS協議，支持代理服務器與認證技術。SSE是文本協議你能輕易的調試它。若是你須要發送大部二進制數據從服務端到客戶端，WebSocket是更好的選擇。關於SSE與WebSocket的區別，本文下面會講到。web

 

HTML5 服務器發送事件（server-sent event）容許網頁得到來自服務器的更新
Server-Sent 事件 - 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
之前也可能作到這一點，前提是網頁不得不詢問是否有可用的更新。經過服務器發送事件，更新可以自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。ajax

瀏覽器支持（全部主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。）api

EventSource 推送（ajax普通輪詢）:瀏覽器

處理過程：緩存

客戶端創建EventSource對象，對服務器經過http協議不斷進行請求。服務器對客戶端的響應數據格式有四部分構成，event，data，id，空格行。客戶端接收到服務器端的響應數據以後，根據event事件值，找到EventSource對象對應的事件監聽器。服務器

 

接收 Server-Sent 事件通知
EventSource 對象用於接收服務器發送事件通知：網絡

    //建立一個新的 EventSource 對象，規定發送更新的頁面的 URL
    var source = new EventSource("../api/MyAPI/ServerSentEvents");

    //默認支持message事件
    source.onmessage = function (event) {
        console.log(source.readyState);
        console.log(event);
    };

實例解析：
　　建立一個新的 EventSource 對象，而後規定發送更新的頁面的 URL（本例中是 "demo_sse.php"），參數url就是服務器網址，必須與當前網頁的網址在同一個網域（domain），並且協議和端口都必須相同。
　　每接收到一次更新，就會發生 onmessage 事件

 

檢測 Server-Sent 事件支持
如下實例，咱們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持狀況：

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

服務器端代碼實例
爲了讓上面的例子能夠運行，您還須要可以發送數據更新的服務器（好比 PHP、ASP、ASP.NET、Java）。
服務器端事件流的語法是很是簡單的。你須要把 "Content-Type" 報頭設置爲 "text/event-stream"。如今，您能夠開始發送事件流了。
我只會C#，因此用 ASP.NET的MVC 裏面的ApiController寫了個最簡單的服務器端：

    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: 123456\nevent: message\ndata: 666\n\n";

            HttpResponseMessage response = new HttpResponseMessage
            {
                //注意：ContentType = "text/event-stream"
                Content = new StringContent(data, Encoding.GetEncoding("UTF-8"), "text/event-stream")
            };

            return Task.FromResult(response);
        }
    }

代碼解釋:
　　把報頭 "Content-Type" 設置爲 "text/event-stream"
　　規定不對頁面進行緩存
　　輸出發送日期（始終以 "data: " 開頭）
　　向網頁刷新輸出數據

 


EventSource 對象

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

source.readyState
它能夠取如下值：

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

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

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

 


在上面的例子中，咱們使用 onmessage 事件來獲取消息。不過還可使用其餘事件：
事件　　　　描述
onopen 　　當通往服務器的鏈接被打開
onmessage 當接收到消息
onerror 　　當發生錯誤

 

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

--------------------------------------------------------------------------------------

規範
Server-sent Events 規範是 HTML 5 規範的一個組成部分，具體的規範文檔見參考資源。該規範比較簡單，主要由兩個部分組成：第一個部分是服務器端與瀏覽器端之間的通信協議，第二部分則是在瀏覽器端可供 JavaScript 使用的 EventSource 對象。通信協議是基於純文本的簡單協議。服務器端的響應的內容類型是「text/event-stream」。響應文本的內容能夠當作是一個事件流，由不一樣的事件所組成。每一個事件由類型和數據兩部分組成，同時每一個事件能夠有一個可選的標識符。不一樣事件的內容之間經過僅包含回車符和換行符的空行（「\r\n」）來分隔。每一個事件的數據可能由多行組成。代碼清單 1 給出了服務器端響應的示例：

retry: 10000\n
event: message\n
id: 636307190866448426\n
data: 2017/05/18 15:44:46\n\n

Chrome瀏覽器監視視圖：

響應報文頭部：

響應報文內容：


每一個事件之間經過空行來分隔。對於每一行來講，冒號（「:」）前面表示的是該行的類型，冒號後面則是對應的值。可能的類型包括：
類型爲空白，表示該行是註釋，會在處理時被忽略。
類型爲 data，表示該行包含的是數據。以 data 開頭的行能夠出現屢次。全部這些行都是該事件的數據。
類型爲 event，表示該行用來聲明事件的類型。瀏覽器在收到數據時，會產生對應類型的事件。
類型爲 id，表示該行用來聲明事件的標識符。
類型爲 retry，表示該行用來聲明瀏覽器在鏈接斷開以後進行再次鏈接以前的等待時間。

當有多行數據時，實際的數據由每行數據以換行符鏈接而成。
若是服務器端返回的數據中包含了事件的標識符，瀏覽器會記錄最近一次接收到的事件的標識符。若是與服務器端的鏈接中斷，當瀏覽器端再次進行鏈接時，會經過 HTTP 頭「Last-Event-ID」來聲明最後一次接收到的事件的標識符。服務器端能夠經過瀏覽器端發送的事件標識符來肯定從哪一個事件開始來繼續鏈接。
對於服務器端返回的響應，瀏覽器端須要在 JavaScript 中使用 EventSource 對象來進行處理。EventSource 使用的是標準的事件監聽器方式，只須要在對象上添加相應的事件處理方法便可。EventSource 提供了三個標準事件：

EventSource 對象提供的標準事件
名稱 　　說明 　　事件處理方法
open 　　當成功與服務器創建鏈接時產生 onopen
message 當收到服務器發送的事件時產生 onmessage
error 　　當出現錯誤時產生 onerror

並且，服務器端能夠返回自定義類型的事件。對於這些事件，可使用 addEventListener 方法來添加相應的事件處理方法：

var es = new EventSource('events');
es.onmessage = function(e) {
    console.log(e.data);
};

//自定義事件 myevent
es.addEventListener('myevent', function(e) {
    console.log(e.data);
});

在指定 URL 建立出 EventSource 對象以後，能夠經過 onmessage 和 addEventListener 方法來添加事件處理方法。當服務器端有新的事件產生，相應的事件處理方法會被調用。EventSource 對象的 onmessage 屬性的做用相似於 addEventListener( ‘ message ’ )，不過 onmessage 屬性只支持一個事件處理方法。

 

傳統的網頁都是瀏覽器向服務器「查詢」數據，可是不少場合，最有效的方式是服務器向瀏覽器「發送」數據。好比，每當收到新的電子郵件，服務器就向瀏覽器發送一個「通知」，這要比瀏覽器按時向服務器查詢（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支持自定義發送的數據類型。

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

 

我的完整的HTML5頁面和C#（MVC實現服務端代碼）以下：

前端HTML5頁面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5 服務器發送事件(Server-Sent Events)-單向消息傳遞</title>
    <meta name="author" content="熊仔其人" />
    <meta name="generator" content="2017-05-18" />
</head>
<body>
    <h1>獲取服務端更新數據</h1>
    <div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
{
    //建立一個新的 EventSource 對象，規定發送更新的頁面的 URL
    var source = new EventSource("../api/MyAPI/ServerSentEvents");
    //默認支持open事件
    source.onopen = function (event) {
        console.log(source.readyState);
        console.log(event);
    };
    //默認支持error事件
    source.onerror = function (event) {
        console.log(source.readyState);
        console.log(event);
    };
    //默認支持message事件
    source.onmessage = function (event) {
        console.log(source.readyState);
        console.log(event);
        document.getElementById("result").innerHTML += event.data + "<br>";
    };

    //處理服務器響應報文中的自定義事件
    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#寫的服務器端：

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
            {
                //喚醒默認的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}\n\n", data);
            return sb.ToString();
        }
        
    }
}

通訊在頁面上的顯示結果：

經過Chrome監控網絡交互時序：

經過Chrome瀏覽器控制檯輸出，下面是一輪ope、message、error事件的詳情：

 

至此，大功告成。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程