DasMessageEvent-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 dasmessage-Ereignis vonEventSource).
• WebSockets (siehe dasmessage-Ereignis vonWebSocket).
• Dokumentübergreifende Nachrichtenübermittlung (sieheWindow.postMessage() und dasmessage-Ereignis vonWindow).
• Channel messaging (sieheMessagePort.postMessage() und dasmessage-Ereignis vonMessagePort).
• Nachrichtenübermittlung zwischen Workern/Dokumenten (siehe die oben erwähnten zwei Einträge, aber auchWorker.postMessage(), dasmessage-Ereignis vonWorker, dasmessage-Ereignis vonServiceWorkerGlobalScope, etc.)
• Broadcast channels (sieheBroadcastChannel.postMessage() und dasmessage-Ereignis vonBroadcastChannel).
• WebRTC-Datenkanäle (siehe dasmessage-Ereignis vonRTCDataChannel).

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

Konstruktor

MessageEvent()

Erstellt ein neuesMessageEvent.

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften von seinem Elternobjekt,Event.

MessageEvent.dataSchreibgeschützt

Die Daten, die vom Nachrichten-Emitter gesendet wurden.

MessageEvent.originSchreibgeschützt

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

MessageEvent.lastEventIdSchreibgeschützt

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

MessageEvent.sourceSchreibgeschützt

EinMessageEventSource (das einWindowProxy,MessagePort oderServiceWorker-Objekt sein kann), das den Nachrichten-Emitter repräsentiert.

MessageEvent.portsSchreibgeschützt

Ein Array vonMessagePort-Objekten, das alle mit der Nachricht gesendetenMessagePort-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 denMessageEvent()-Konstruktor.

Beispiele

In unseremGrundlegenden 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 einesSharedWorker-Objekts mithilfe desSharedWorker()-Konstruktors. Beide Skripte enthalten dieses:

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

Beide Skripte greifen dann über einMessagePort-Objekt zu, das mithilfe derSharedWorker.port-Eigenschaft erstellt wurde. Wenn dasonmessage-Ereignis mitaddEventListener angehängt wird, wird der Port manuell mit seinerstart()-Methode gestartet:

myWorker.port.start();

Wenn der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und behandeln Nachrichten, die von diesem mitport.postMessage() undport.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 denonconnect-Handler, um die Verbindung zum oben beschriebenen Port herzustellen. Die mit diesem Worker verbundenen Ports sind über dieports-Eigenschaft desconnect-Ereignisses zugänglich – wir verwenden dann diestart()-Methode vonMessagePort, um den Port zu starten, und denonmessage-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.