Événements de serveur

Points de base

• Le serveur Send Events (SSE) est une méthode pour pousser les données et / ou les événements DOM du serveur vers le client à l'aide de flux, et est idéal pour les situations où les données doivent être mises à jour régulièrement, telles que les scores sportifs ou les devis en bourse.
• La création d'objets Eventsource vous permet de vous abonner aux flux d'événements et peut gérer les événements ouverts, messages et d'erreur.
• L'envoi d'événements du serveur nécessite que le contenu soit fourni à l'aide de l'en-tête Content-type (valeur text/event-stream) et du codage des caractères UTF-8. La syntaxe pour que le serveur puisse envoyer des événements comprend des données, le type d'événement, l'identifiant d'événements et l'intervalle de réessayer.
• La gestion des événements peut utiliser la fonction onmessage (uniquement pour les applications qui envoient des événements de message), mais la méthode addEventListener est plus flexible pour gérer les événements personnalisés.
• Les navigateurs les plus modernes (y compris Chrome, Firefox et Safari) prennent en charge le serveur d'envoi (SSE), mais Internet Explorer ne le fait pas. Pour les applications qui nécessitent une prise en charge de tous les navigateurs, des lignes Web ou des sondages longs peuvent être plus appropriés.

1. Introduction
2. Abonnez-vous à Stream: Eventsource Object
3. Envoi des événements du serveur
   1. Envoyer un événement de message
   2. Envoyer des événements personnalisés
   3. Reconnecter à l'aide de la gestion des intervalles de réchauffement
   4. Définissez l'identifiant unique à l'aide du champ ID
4. Événements de traitement
5. Erreur de traitement
6. Différences d'implémentation du navigateur
7. Soutien du navigateur et stratégie de secours

Supposons que l'équipe nationale de basket-ball de votre pays participe au championnat du monde de basket-ball. Vous voulez suivre le jeu, mais vous ne pouvez pas le regarder car le temps de jeu entre en conflit avec vos heures de travail.

Heureusement, votre service de nouvelles national a une équipe de développement Web très remarquable. Ils ont construit un écran de défilement d'informations sportives qui se met à jour chaque fois qu'une faute ou un score se produit. Lorsque vous visitez une URL, la mise à jour sera poussée directement à votre navigateur. Bien sûr, vous voudrez savoir comment ils l'ont fait. La réponse est: le serveur envoie l'événement.

Les événements d'envoi du serveur sont un moyen d'utiliser un flux pour pousser les données et / ou les événements DOM du serveur vers le client. Il convient aux devis en bourse, aux scores sportifs, au suivi des vols, aux notifications par e-mail - toute situation où les données doivent être mises à jour régulièrement.

attendez! Je vous ai entendu dire, ne pouvons-nous pas déjà faire cela en utilisant xmlhttprequest ou websockets? Oui, oui. Cependant, cela nécessite de prolonger ces objets pour implémenter la fonctionnalité de EventsOrce lui-même.

Précautions côté serveur

Étant donné que le serveur envoie des événements sont des flux de données, ils nécessitent des connexions à long terme. Vous devez utiliser un serveur qui peut gérer un grand nombre de connexions simultanées. Bien sûr, les serveurs axés sur les événements conviennent particulièrement aux événements en streaming. Il s'agit notamment de Node.js, Juggernaut et Twisted. Pour Nginx, vous pouvez utiliser le module Nginx-Push-Stream-Module. Cependant, la configuration du serveur est en dehors de la portée de cet article et variera en fonction du serveur que vous utilisez.

Voyons comment vous abonner à un flux à l'aide d'objet Eventsource. Ensuite, nous verrons comment les événements sont envoyés et traités.

Abonnez-vous au flux d'événements: Eventsource Object

La création d'un objet Eventsource est simple.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

Le constructeur Eventsource accepte jusqu'à deux paramètres:

• une chaîne d'URL (requise);
a
• Paramètre de dictionnaire facultatif Utilisé pour définir la valeur de l'attribut . withCredentials

Les dictionnaires sont syntaxiquement similaires aux objets, mais ce sont en fait des tableaux associatifs de données avec des paires de valeurs de nom définies. Dans ce cas,

est le seul membre du dictionnaire possible. Sa valeur peut être vraie ou fausse. (Pour plus d'informations sur les dictionnaires, consultez la spécification Web IDL.) withCredentials

Les paramètres du dictionnaire ne sont requis que si les demandes de domaine transversal pour les informations d'identification de l'utilisateur (cookies). Jusqu'à présent, aucun navigateur ne prend en charge les demandes d'événements inter-domaines. Par conséquent, nous n'inclurons pas le deuxième paramètre de l'exemple.

Lorsque la connexion Eventsource est ouverte, elle déclenchera un événement

. Nous pouvons définir une fonction qui gère l'événement en définissant la propriété open. onopen

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

S'il y a un problème avec notre connexion, une erreur sera déclenchée. Nous pouvons utiliser la propriété

pour définir une fonction de gestionnaire pour ces événements. Nous discuterons des causes de certains événements d'erreur dans la section "Erreurs de formation". onerror

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

Les événements d'histoire par défaut par défaut des événements de message. Pour gérer les événements de message, nous pouvons utiliser l'attribut

pour définir une fonction de gestionnaire. onmessage

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

Nous pouvons également utiliser

pour écouter pour les événements. C'est le seul moyen de gérer les événements personnalisés, comme nous le verrons dans la section des événements de traitement. addEventListener()

var onerrorhandler = function(openevent){
    // 执行的操作
}
evtsrc.addEventListener('error',onerrorhandler,false);

Pour fermer la connexion, utilisez la méthode

. close()

evtsrc.close();

Par conséquent, nous avons créé l'objet Eventsource et défini le gestionnaire des événements d'ouverture, de message et d'erreur. Cependant, pour que cette méthode fonctionne, nous avons besoin d'une URL pour les événements de streaming.

Envoi des événements du serveur

Le serveur envoie l'événement est un extrait de texte livré dans le cadre du flux de l'URL. Pour que le navigateur traite nos données comme un flux, nous devons:

Utilisez l'en-tête
• (la valeur est Content-type) pour fournir du contenu; text/event-stream Utilisez le codage des caractères UTF-8.
La syntaxe pour le serveur peut envoyer des événements est simple. Il se compose d'une ou plusieurs paires de valeurs de nom de champ séparées par le côlon suivie d'un personnage de Newline. Le nom de champ peut contenir l'une des quatre valeurs possibles.

: Le message à envoyer.
• data:
: Le type d'événement est expédié.
• event:
: L'identifiant de l'événement à utiliser lorsque le client se reconnecte.
• id:
: Combien de millisecondes doivent passer avant que le navigateur essaie de se reconnecter à l'URL.
• retry:
Parmi eux, seul le champ

est requis.

Envoyer un événement de message

Dans cet exemple, nous enverrons un événement pour annoncer quelles équipes jouent dans nos matchs de tournoi. Lorsque le navigateur reçoit ce texte, il dépasse un événement de message.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

La valeur du champ

data deviendra la valeur de l'attribut data de l'événement de message. Comme mentionné ci-dessus, le serveur envoie un événement par défaut est un événement de message. Mais comme nous en discuterons plus loin, nous pouvons également envoyer des événements personnalisés en incluant le champ event.

Nous pouvons également envoyer plusieurs données en tant qu'événement unique. Chaque élément de données doit être suivi d'un caractère Newline (ligne de ligne de ligne, retour en chariot ou les deux). Ici, nous ajoutons un événement qui comprend ce lieu de jeu et cette fréquentation.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

Pour cet événement, la valeur de l'attribut data sera: Air Canada Centrentoronto, Ontario, Canada Tendance: 19 800.

Veuillez noter les lignes vides entre les événements. Pour que le client reçoive un événement, l'événement doit être suivi d'une ligne vide. Les commentaires commencent par un côlon.

Envoyer des événements personnalisés

à moins que nous ne spécifions le contraire, le type d'événement est un message. Pour ce faire, nous devons inclure un champ event. Dans l'exemple suivant, nous ajouterons deux événements startingfive à notre flux et envoyer nos données sous forme de chaîne au format JSON.

evtsrc.onerror = function(openevent){
    // 发生错误时执行的操作
}

Ici, nous devons écouter les événements startingfive au lieu d'événements de message. Cependant, notre champ data deviendra toujours la valeur de la propriété data de l'événement.

Nous discuterons des propriétés data et de l'interface MessageEvent dans la section "Traitement Events".

Gérer les connexions et reconnecter

Maintenant, bien que le serveur pousse les événements vers le navigateur, la réalité est plus subtile. Si le serveur maintient la connexion ouverte, la demande Eventsource sera une demande prolongée. S'il est fermé, le navigateur attendra quelques secondes avant de se reconnecter. Par exemple, si l'URL envoie une balise de fin de fichier, la connexion peut être fermée.

Chaque navigateur a son propre intervalle de reconnexion par défaut. La plupart se reconnecteront après 3 à 6 secondes. Cependant, vous pouvez contrôler cet intervalle en incluant le champ retry. Le champ retry indique le nombre de millisecondes que le client doit attendre avant de se reconnecter à l'URL. Construisons et changeons notre événement par rapport à l'exemple ci-dessus pour inclure un intervalle de réessayer de 5 secondes (5000 millisecondes).

evtsrc.onmessage = function(openevent){
    // 接收到消息事件时执行的操作
}

Les flux d'événements peuvent être maintenus actifs tant que le client est connecté. Selon votre architecture et votre application, vous pouvez vouloir que le serveur ferme périodiquement la connexion.

Définissez l'identifiant unique à l'aide du champ ID

Lorsque le navigateur se reconnecte à l'URL, il recevra toutes les données disponibles au point de connexion. Cependant, pour l'affichage de défilement des informations sur le jeu, nous voulons peut-être faire savoir au visiteur ce qu'il a manqué. C'est pourquoi la meilleure pratique pour définir l'ID à chaque événement. Dans l'exemple suivant, nous envoyons ID dans le cadre de l'événement de notation.

var evtsrc = new EventSource('./url_of/event_stream/',{withCredentials:false});

La valeur doit être unique au flux. Dans ce cas, nous utilisons le temps du score de tir.

Le champ

id devient la propriété lastEventId de cet objet d'événement. Mais il a un autre but. Si la connexion est fermée, le navigateur comprendra un en-tête Last-Event-ID dans sa prochaine demande. Considérez-le comme un signet pour le flux. Si l'en-tête Last-Event-ID existe, vous pouvez ajuster la réponse de l'application afin que seuls les événements qui le suivent soient envoyés.

Événements de traitement

Comme mentionné ci-dessus, tous les événements par défaut des événements de message. Chaque événement de message propose trois propriétés, définies par l'interface MessageEvent.

event.data

Renvoie les données ou le message envoyé dans le cadre de l'événement de message.

event.origin

Renvoie la source du message, qui est généralement une chaîne contenant le schéma pour envoyer le message (par exemple: http, https), nom d'hôte et port.

event.LastEenventid

Renvoie l'identifiant unique du dernier événement reçu.

chaque fois qu'un événement de message est déclenché, notre fonction onmessage sera appelée. Cela fonctionne très bien pour les applications que vous uniquement Envoyez des événements de message. Cependant, si vous souhaitez envoyer une partition ou un événement startingfive (comme indiqué dans notre exemple), ses limitations deviennent évidentes. Plus flexible en utilisant addEventListener. Dans le code suivant, nous utilisons addEventListener pour gérer l'événement startingfive.

var evtsrc = new EventSource('./url_of/event_stream/');
evtsrc.onopen = function(openevent){
    // 连接打开时执行的操作
}

(deuxième partie, en raison des limitations de l'espace, veuillez poser des questions dans les paragraphes.)

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!