H5的伺服器推播事件詳解

這次帶給大家H5的伺服器推送事件詳解，伺服器推送事件的注意事項有哪些，以下就是實戰案例，一起來看一下。

伺服器推送事件（Server-sent Events）是基於WebSocket 協定的一種伺服器向客戶端發送事件&資料的單向通訊。目前所有主流瀏覽器均支援伺服器發送事件，當然除了 Internet Explorer 。 2333...

WebSocket 協定是繼HTTP協議後又一伺服器客戶端通訊協議，不同於HTTP單純的客戶端請求伺服器回應單向通訊模式的是它支援了服務端客戶端的雙向通訊。

Server-sent Events 的使用

Server-sent Events（以下簡稱SSE）作為伺服器=>客戶端通訊方式那必然客戶端要有對應的服務位址和回應方法，服務端要有對應的資料傳送方法；廢話不多說，上程式碼！

客戶端JS程式碼

 H5頁面需新增下列JS程式碼：

     <script>
         if (typeof (EventSource) !== "undefined") {
             //推送服务接口地址
             var eventSource = new EventSource("http://localhost:2242/webservice/ServerSent/SentNews");
             //当通往服务器的连接被打开
             eventSource.onopen = function () {
                 console.log("连接打开...");
             }
              //当错误发生
              eventSource.onerror= function (e) {
                  console.log(e);
              };
              //当接收到消息，此事件为默认事件
              eventSource.onmessage = function (event) {
                  console.log("onmessage...");
          　　　　 eventSource.close()//关闭SSE链接
              };
              //服务器推送sentMessage事件
              eventSource.addEventListener(&#39;sentMessage&#39;, function (event) { 
                  var data = eval(&#39;(&#39;+event.data+&#39;)&#39;);//服务器端推送的数据，eval装换Json对象
                  var origin = event.origin;//服务器 URL 的域名部分，即协议、域名和端口，表示消息的来源。
                  var lastEventId = event.lastEventId;////数据的编号，由服务器端发送。如果没有编号，这个属性为空。
                  //此处根据需求编写业务逻辑
                  console.log(data);              }, false);
          } else {
              //浏览器不支持server-sent events 所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。
              document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
          }
      </script>

服務端

#服務端應傳回怎樣的資料格式？應以什麼樣的回應給客戶端呢？先來個.Net 的範例

　　　　/// <summary>
        /// 推送消息
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public HttpResponseMessage SentNews()
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
            try
            {
                //response.Headers.Add("Access-Control-Allow-Origin", "*");//如需要跨域可配置
                string data_str = “推送至客户端的数据”;//当然可以是json字符串格式
                string even = "", data = "";
                if (!string.IsNullOrWhiteSpace(data_str))
                {
                    even = "event:sentMessage\n";
                    data = "data:" + data_str + "\n\n";
                }
                string retry = "retry:" + 1000 + "\n";//连接断开后重连时间（毫秒），其实可以理解为轮询时间 2333...
                byte[] array = Encoding.UTF8.GetBytes(even + data + retry);
                Stream stream_result = new MemoryStream(array);
                response.Content = new StreamContent(stream_result);
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/event-stream");//此处一定要配置
                response.Headers.CacheControl = new CacheControlHeaderValue();
                response.Headers.CacheControl.NoCache = false;
            }
            catch (Exception ex)
            {
                LogHelper.WriteWebLog(ex);
            }
            return response;
        }

看完以上程式碼我想你應該有個大概了，回應的方式還是HTTPResponse回應，但總是有點小小的要求：

回應標頭"Content-Type" 要設定為"text/event-stream"

回應的資料格式也應該注意到了上述程式碼中的"data:"、"event:"和"retry:"這些標記：

1.event：表示該行用來宣告事件的型別。瀏覽器收到資料時，會產生對應類型的事件。

2.data：表示該行包含的是資料。以 data 開頭的行可以出現多次。所有這些行都是該事件的資料。

3.retry：表示該行用來聲明瀏覽器在連線中斷之後進行再次連線之前的等待時間。

4.id：表示該行用來宣告事件的識別碼（即資料的編號），不常用。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

H5中​​的video標籤無法播放mp4檔案如何解決

H5的多執行緒（Worker SharedWorker）使用詳解

使用phonegap複製和刪除聯絡人

以上是H5的伺服器推播事件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！