MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

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.

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.
};