MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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:

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

Event MessageEvent

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 mehrverwenden 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:

js
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:

js
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:

js
[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.

js
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

Specification
HTML
# the-messageevent-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
MessageEvent
MessageEvent() constructor
data
initMessageEvent
Deprecated
lastEventId
origin
ports
source
userActivation
Non-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

Siehe auch

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