Une explication des événements push du serveur HTML5

Cet article présente principalement une brève discussion sur les événements push du serveur HTML5 (événements envoyés par le serveur), qui ont une certaine valeur de référence. Ceux qui sont intéressés peuvent en savoir plus sur

Que sont les événements push du serveur (envoyés par le serveur). Événements) Une communication unidirectionnelle basée sur le protocole WebSocket dans laquelle 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 du 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(&#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>

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. La méthode de réponse est toujours une réponse HTTPResponse, mais c'est le cas. toujours un petit peu Une petite requête :

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 être noté dans ce qui précède code : "data:", "event:" et "retry:" 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é.

Ce qui précède est une simple application d'événements envoyés par le serveur. Je ne montrerai plus l'effet. Si vous êtes intéressé, vous pouvez l'utiliser vous-même pour obtenir l'effet !

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!