Ausführliche Erläuterung der H5-Server-Push-Ereignisse

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung des H5-Server-Push--Ereignisses und der Vorsichtsmaßnahmen für Server-Push-Ereignisse. Hier ist ein praktischer Fall, schauen wir uns das an .

Vom Server gesendete Ereignisse sind eine unidirektionale Kommunikation, die auf dem WebSocket-Protokoll basiert, bei dem der Server Ereignisse und Daten an den Client sendet. Alle gängigen Browser unterstützen derzeit vom Server gesendete Ereignisse, außer natürlich Internet Explorer. 2333...

Das WebSocket-Protokoll ist ein weiteres Server-Client-Kommunikationsprotokoll nach dem HTTP-Protokoll. Im Gegensatz zu HTTP, einem einfachen einseitigen Kommunikationsmodus, bei dem der Client den Server um eine Antwort bittet, unterstützt es zwei Protokolle. Art und Weise der Kommunikation zwischen dem Server und dem Client.

Verwendung von vom Server gesendeten Ereignissen

Vom Server gesendete Ereignisse (im Folgenden als SSE bezeichnet) als Server => Client-Kommunikationsmethode unvermeidlich Der Client muss über eine entsprechende Dienstadresse und Antwortmethode verfügen, und der Server muss ohne weiteres über eine entsprechende Datensendemethode verfügen. Kommen wir zum Code.

Clientseitiger JS-Code

Auf der H5-Seite muss der folgende JS-Code hinzugefügt werden:

     <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('sentMessage', function (event) { 
                  var data = eval('('+event.data+')');//服务器端推送的数据，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>

Serverseitig

Welches Datenformat soll der Server zurückgeben? Welche Art von Antwort sollte dem Kunden gegeben werden? Beginnen wir mit einem .Net-Beispiel

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

Nachdem Sie den obigen Code gelesen haben, sollten Sie meiner Meinung nach eine ungefähre Vorstellung davon haben, dass die Antwortmethode immer noch HTTPResponse ist, aber es gibt immer einige kleine Anforderungen:

Der Antwortheader „Content-Type“ sollte auf „text/event-stream“ gesetzt sein

Das Antwortdatenformat sollte auch die „data:“, „event:“ und „retry“ im enthalten obiger Code: „Diese Tags:

1.event: Gibt den Ereignistyp an, der von dieser Zeile zum Deklarieren eines Ereignisses verwendet wird. Wenn der Browser Daten empfängt, generiert er Ereignisse des entsprechenden Typs.

2.data: Zeigt an, dass die Zeile Daten enthält. Zeilen, die mit data beginnen, können mehrfach vorkommen. Alle diese Zeilen sind Daten für dieses Ereignis.

3.retry: Gibt an, dass diese Zeile verwendet wird, um die Wartezeit des Browsers anzugeben, bevor er nach dem Trennen der Verbindung erneut eine Verbindung herstellt.

4.id: Gibt die Kennung (d. h. die Nummer der Daten) an, die von dieser Zeile zum Deklarieren des Ereignisses verwendet wird, was nicht häufig verwendet wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So lösen Sie das Problem, dass das Video-Tag in H5 keine MP4-Dateien abspielen kann

H5s Multi -Threading (Worker SharedWorker) ausführliche Erklärung

Phonegap zum Klonen und Löschen von Kontakten verwenden

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der H5-Server-Push-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!