MessageEvent

Das MessageEvent-Interface repräsentiert eine Nachricht, die von einem Zielobjekt empfangen wurde.

Dies wird verwendet, um Nachrichten in folgenden Kontexten zu repräsentieren:

• Server-sent events (siehe das message-Ereignis von EventSource).
• WebSockets (siehe das message-Ereignis von WebSocket).
• Dokumentübergreifende Nachrichtenübermittlung (siehe Window.postMessage() und das message-Ereignis von Window).
• Channel messaging (siehe MessagePort.postMessage() und das message-Ereignis von MessagePort).
• Nachrichtenübermittlung zwischen Workern/Dokumenten (siehe die oben erwähnten zwei Einträge, aber auch Worker.postMessage(), das message-Ereignis von Worker, das message-Ereignis von ServiceWorkerGlobalScope, etc.)
• Broadcast channels (siehe BroadcastChannel.postMessage() und das message-Ereignis von BroadcastChannel).
• WebRTC-Datenkanäle (siehe das message-Ereignis von RTCDataChannel).

Die durch dieses Ereignis ausgelöste Aktion wird in einer Funktion definiert, die als Ereignis-Handler für das betreffende message-Ereignis gesetzt ist.

Konstruktor

MessageEvent()

Erstellt ein neues MessageEvent.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Elternobjekt, Event.

MessageEvent.data Schreibgeschützt

Die Daten, die vom Nachrichten-Emitter gesendet wurden.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichten-Emitters repräsentiert.

MessageEvent.lastEventId Schreibgeschützt

Ein String, der eine eindeutige ID für das Ereignis repräsentiert.

MessageEvent.source Schreibgeschützt

Ein MessageEventSource (das ein WindowProxy, MessagePort oder ServiceWorker-Objekt sein kann), das den Nachrichten-Emitter repräsentiert.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, das alle mit der Nachricht gesendeten MessagePort-Objekte in der richtigen Reihenfolge enthält.

Instanz-Methoden

Dieses Interface erbt auch Methoden von seinem Elternobjekt, Event.

initMessageEvent() Veraltet

Initialisiert ein Nachrichtenevent. Verwenden Sie dies nicht mehr — verwenden Sie stattdessen den MessageEvent()-Konstruktor.

Beispiele

In unserem Grundlegenden Beispiel für Shared Worker (Shared Worker ausführen), haben wir zwei HTML-Seiten, von denen jede ein JavaScript verwendet, um eine Berechnung durchzuführen. Die verschiedenen Skripte verwenden dieselbe Worker-Datei, um die Berechnung durchzuführen – sie können beide darauf zugreifen, selbst wenn ihre Seiten in unterschiedlichen Fenstern ausgeführt werden.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts mithilfe des SharedWorker()-Konstruktors. Beide Skripte enthalten dieses:

const myWorker = new SharedWorker("worker.js");

Beide Skripte greifen dann über ein MessagePort-Objekt zu, das mithilfe der SharedWorker.port-Eigenschaft erstellt wurde. Wenn das onmessage-Ereignis mit addEventListener angehängt wird, wird der Port manuell mit seiner start()-Methode gestartet:

myWorker.port.start();

Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und behandeln Nachrichten, die von diesem mit port.postMessage() und port.onmessage gesendet werden:

[first, second].forEach((input) => {
 input.onchange = () => {
 myWorker.port.postMessage([first.value, second.value]);
 console.log("Message posted to worker");
 };
});
myWorker.port.onmessage = (e) => {
 result1.textContent = e.data;
 console.log("Message received from worker");
};

Im Inneren des Workers verwenden wir den onconnect-Handler, um die Verbindung zum oben beschriebenen Port herzustellen. Die mit diesem Worker verbundenen Ports sind über die ports-Eigenschaft des connect-Ereignisses zugänglich – wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um Nachrichten von den Haupt-Threads zu bearbeiten.

onconnect = (e) => {
 const port = e.ports[0];
 port.addEventListener("message", (e) => {
 const workerResult = `Result: ${e.data[0] * e.data[1]}`;
 port.postMessage(workerResult);
 });
 port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

Spezifikationen

Browser-Kompatibilität

Siehe auch

• ExtendableMessageEvent — ähnlich dieses Interface, aber in Interfaces verwendet, die den Autoren mehr Flexibilität bieten müssen.