Spécifications de MessageEvent et SSE en HTML5

1.MessageEventInterface

La nouvelle méthode de communication définie dans la spécification HTML5, qu'elle soit WebSocket ou SSE, y compris l'implémentation Le WebRTC pour la communication vidéo et audio repose tous sur une interface définie dans la spécification HTML5 : MessageEvent. Il s'agit d'un événement basé sur un message. Tout d’abord, nous pouvons jeter un œil aux types d’événements traditionnels en JavaScript.

Les classes de base des événements DOM traditionnels comprennent principalement :

(1) UIEvents : événements d'interface utilisateur généralisés, dans lesquels les événements de souris et de clavier sont tous deux hérités des événements d'interface utilisateur. ;

(2)MouseEvents : les événements de souris généralisés, tels que les événements de clic, les événements mousemove, etc., sont tous des instances du type d'événement MouseEvents ;

(3)MutationEvents : modifications généralisées du DOM Événements ;

(4)HTMLEvents : événements HTML généralisés.

L'événement MessageEvent ajouté en HTML5 est un événement spécialement utilisé pour la transmission d'événements. En plus des attributs de l'événement, il contient également des attributs uniques qui lui sont propres. Le code spécifique de l'interface ne sera pas publié ici. Vous pouvez consulter la page 880 de la spécification HTML5.

Les nouveaux attributs importants de MessageEvent incluent :

(1)data : ce qui est stocké ici sont les données envoyées par le serveur

(2)lastEventId : ce qui est stocké voici Le dernier événementIDString

De plus, il comprend également l'origine, les ports, la source et d'autres attributs. Apprenons à utiliser MessageEvent à travers l'analyse de l'implémentation de SSE.

2. SSE et MessageEvent

L'implémentation du client SSE utilise l'interface MessageEvent.

Chaque champ de la liste du serveur sera interprété par le client selon une règle, et le champ id correspond au lastEventId dans le MessageEvent. Une fois les données définies dans le champ de données interprétées, elles seront envoyées au champ de données de MessageEvent Voir le code suivant :

var es = new EventSource("test.php");
es.addEventListener("message", function(e){
    console.log(e);
})

Cet Inside, nous utilisons directement la méthode de traitement de l'objet événement

et imprimons la structure de cet objet événement dans la console Chrome. Vous pouvez voir que le champ de données de cet objet correspond aux données envoyées dans test.php, son type est message et son prototype hérite de MessageEvent.

Notez également que la nouvelle tentative dans le manifeste du serveur SSE est une propriété interne et ne peut pas être obtenue via le code JavaScript.

3. Interface EventSource

L'interface EventSource que nous utilisons dans SSE est définie dans la spécification HTML5 et le code. est visible page 882 de la spécification HTML5.

Comme vous pouvez le voir sur l'interface, le premier est constitué des trois programmes intégrés de gestion des événementsdéfinis : onopen/onmessage/onclose . De plus, il inclut également le statusreadyState des trois connexions CONNECTING indique que la connexion est en cours d'établissement. La situation possible est que la connexion n'a pas été établie. n'a pas encore été établie ou la connexion a été interrompue et le client est en train de la rétablir. OPEN indique que la connexion est ouverte et peut transmettre des données, FERMÉ indique que la connexion est interrompue et que le client ne tente pas de se reconnecter. Parmi les méthodes définies, on peut voir que seule close() est utilisée pour fermer la connexion.

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!