Maison > interface Web > Tutoriel H5 > Introduction détaillée aux événements push du serveur

Introduction détaillée aux événements push du serveur

零下一度
Libérer: 2017-07-26 18:08:29
original
2089 Les gens l'ont consulté

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. Actuellement, tous les principaux navigateurs prennent 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 client demandant une réponse du serveur, il prend en charge le mode de communication unidirectionnel Two. communication multidirectionnelle entre le serveur et le client.

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

Événements envoyés par le serveur (ci-après dénommés SSE) en tant que serveur => Pour la méthode de communication client, le client doit avoir l'adresse de service et la méthode de réponse correspondantes, et le serveur doit avoir la méthode d'envoi de données correspondante, sans plus tarder, passons au code !

Code JS côté client

 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('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>
Copier après la connexion

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;
        }
Copier après la connexion

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 la réponse 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 balises "data:", "event:" et "retry:" dans le code ci-dessus :

  1. event : Indique le type d'événement utilisé par cette ligne à déclarer. 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 des É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 l'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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal