Explication détaillée des événements push du serveur H5

Cette fois, je vous apporte une explication détaillée de l'événement push du serveur H5 , et quelles sont les précautions pour les événements push du serveur Voici un cas pratique, jetons un coup d'œil. .

Les événements envoyés par le serveur sont une communication unidirectionnelle basée sur le protocole WebSocket dans lequel le serveur envoie des événements et des données au client. Tous les principaux navigateurs prennent actuellement en charge les événements envoyés par le serveur, à l'exception bien sûr d'Internet Explorer. 2333...

Le protocole WebSocket est un autre protocole de communication serveur-client après le protocole HTTP. Contrairement à HTTP, qui est un simple mode de communication unidirectionnel où le client demande au serveur de répondre, il prend en charge deux- manière de communication entre le serveur et le client.

Utilisation des événements envoyés par le serveur

Les événements envoyés par le serveur (ci-après dénommés SSE) comme serveur => la méthode de communication client est inévitable Le client doit avoir une adresse de service et une méthode de réponse correspondantes, et le serveur doit avoir une méthode d'envoi de données correspondante, sans plus tarder, passons au code !

Code JS côté client

La page H5 doit ajouter le code JS suivant :

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

Côté serveur

Quel format de données le serveur doit-il renvoyer ? Quelle réponse apporter au client ? Commençons par un exemple .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;
        }

Après avoir lu le code ci-dessus, je pense que vous devriez avoir une idée générale. La méthode de réponse est toujours HTTPResponse, mais il y a toujours quelques petites exigences :

<.>L'en-tête de réponse "Content-Type" doit être défini sur "text/event-stream"

Le format des données de réponse doit également noter les "data:", "event:" et "retry" dans le code ci-dessus :"Ces balises :

1.event : Indique le type d'événement utilisé par cette ligne pour déclarer un événement. Lorsque le navigateur reçoit des données, il génère des événements du type correspondant.

2.data : Indique que la ligne contient des données. Les lignes commençant par data peuvent apparaître plusieurs fois. Toutes ces lignes sont des données pour cet événement.

3.retry : Indique que cette ligne permet de déclarer le temps d'attente du navigateur avant de se reconnecter après la déconnexion de la connexion.

4.id : Indique l'identifiant (c'est-à-dire le numéro de la donnée) utilisé par cette ligne pour déclarer l'événement, ce qui n'est pas couramment utilisé.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment résoudre le problème selon lequel la balise vidéo dans H5 ne peut pas lire les fichiers mp4

Le multi de H5 -threading (Worker SharedWorker) explication détaillée

Utiliser phonegap pour cloner et supprimer des contacts

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!