Detailed explanation of H5 server push events

This time I will bring you a detailed explanation of H5 server push events, and what are the precautions for server push events. The following is a practical case, let’s take a look.

Server-sent Events are a one-way communication based on the WebSocket protocol in which the server sends events & data to the client. All major browsers currently support server-sent events, except Internet Explorer of course. 2333...

WebSocket protocol is another server-client communication protocol after the HTTP protocol. Different from HTTP's simple one-way communication mode where the client requests the server to respond, it supports two-way communication between the server and the client. .

The use of Server-sent Events

Server-sent Events (hereinafter referred to as SSE) as the server => client communication method is inevitable The client must have a corresponding service address and response method, and the server must have a corresponding data sending method; without further ado, let’s get to the code!

Client-side JS code

The H5 page needs to add the following JS code:

     <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>

Server-side

What data format should the server return? What kind of response should be given to the client? Let’s take a .Net example first

　　　　/// <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;
        }

After reading the above code, I think you should have a rough idea. The response method is still HTTPResponse response, but there are always some small requirements:

Response header "Content-Type" should be set to "text/event-stream"

The response data format should also note the "data:", "event:" and "retry:" in the above code These tags:

1.event: Indicates the type of event used by this line to declare. When the browser receives data, it will generate events of the corresponding type.

2.data: Indicates that the row contains data. Lines starting with data can appear multiple times. All these rows are data for that event.

3.retry: Indicates that this line is used to declare the waiting time of the browser before reconnecting after the connection is disconnected.

4.id: Indicates the identifier (that is, the number of the data) used by this row to declare the event, which is not commonly used.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to solve the problem that the video tag in H5 cannot play mp4 files

H5’s multi-threading (Worker SharedWorker) detailed explanation

Use phonegap to clone and delete contacts

The above is the detailed content of Detailed explanation of H5 server push events. For more information, please follow other related articles on the PHP Chinese website!