Spezifikationen von MessageEvent und SSE in HTML5

1.MessageEventSchnittstelle

Die neue Kommunikationsmethode, die in der HTML5-Spezifikation definiert ist, unabhängig davon, ob es sich um WebSocket oder SSE handelt, einschließlich Implementierung WebRTC für die Video- und Audio-Kommunikation basiert alle auf einer in der HTML5-Spezifikation definierten Schnittstelle: MessageEvent. Dies ist ein nachrichtenbasiertes Ereignis. Zunächst können wir einen Blick auf die traditionellen Ereignistypen in JavaScript werfen.

Zu den Basisklassen traditioneller DOM-Ereignisse gehören hauptsächlich:

(1) UIEvents: verallgemeinerte UI-Ereignisse, bei denen Mausereignisse und Tastaturereignisse beide von UI-Ereignissen geerbt werden ;

(2)MouseEvents: Generalisierte Mausereignisse, wie Klickereignisse, Mausbewegungsereignisse usw., sind alle Instanzen des MouseEvents-Ereignistyps;

(3)MutationEvents: Generalisierte DOM-Änderungen Ereignisse;

(4)HTMLEvents: Generalisierte HTML-Ereignisse.

Das in HTML5 hinzugefügte MessageEvent-Ereignis ist ein Ereignis, das speziell für die Ereignisübertragung verwendet wird. Zusätzlich zu den Attributen von Event enthält es auch einige eigene einzigartige Attribute. Der spezifische Code der Schnittstelle wird hier nicht veröffentlicht. Sie können ihn auf Seite 880 der HTML5-Spezifikation einsehen.

Zu den neuen wichtigen Attributen von MessageEvent gehören:

(1)Daten: Was hier gespeichert wird, sind die vom Server gesendeten Daten

(2)lastEventId: Was wird gespeichert Hier ist Das letzte EreignisIDString

Darüber hinaus enthält es auch Ursprung, Ports, Quelle und andere Attribute. Lassen Sie uns anhand der Analyse der SSE-Implementierung lernen, wie MessageEvent verwendet wird.

2. SSE und MessageEvent

Die Implementierung des SSE-Clients nutzt die MessageEvent-Schnittstelle.

Jedes Feld in der Serverliste wird vom Client gemäß einer Regel interpretiert, und das ID-Feld entspricht der lastEventId im MessageEvent. Nachdem die im Datenfeld definierten Daten interpretiert wurden, werden sie an das Datenfeld von MessageEvent gesendet. Siehe folgenden Code:

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

In diesem Inneren verwenden wir direkt die Verarbeitungsmethode des Ereignis--Objekts und drucken die Struktur dieses Ereignisobjekts in der Chrome-Konsole aus. Sie können sehen, dass das Datenfeld dieses Objekts die in test.php gesendeten Daten sind, sein Typ ist Nachricht und sein Prototyp erbt MessageEvent.

Beachten Sie außerdem, dass die Wiederholung im SSE-Servermanifest eine interne Eigenschaft ist und nicht über JavaScript-Code abgerufen werden kann.

3. EventSource-Schnittstelle

Die EventSource-Schnittstelle, die wir in SSE verwenden, ist in der HTML5-Spezifikation und im Code definiert ist auf Seite 882 der HTML5-Spezifikation sichtbar.

Wie Sie auf der Benutzeroberfläche sehen können, sind das erste die drei integrierten Event-HandlingProgramme, die definiert sind: onopen/onmessage/onclose . Darüber hinaus gibt der StatusreadyState der drei Verbindungen an, dass die Verbindung nicht hergestellt wird wurde bereits hergestellt oder die Verbindung wurde unterbrochen und der Client baut sie erneut auf. OPEN zeigt an, dass die Verbindung offen ist und Daten übertragen kann, GESCHLOSSEN zeigt an, dass die Verbindung unterbrochen ist und der Client nicht versucht, die Verbindung wiederherzustellen. Unter den definierten Methoden können wir sehen, dass nur close() zum Schließen der Verbindung verwendet wird.

Das obige ist der detaillierte Inhalt vonSpezifikationen von MessageEvent und SSE in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!