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

Jul 26, 2017 pm 06:08 PM
html5 服务器

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

See all articles