MessageEvent

MessageEvent()

Erstellt ein neues MessageEvent.

Dieses Interface erbt auch Eigenschaften von seinem Elternteil, Event.

MessageEvent.data Nur lesbar

Die von dem Nachrichten-Emitter gesendeten Daten.

MessageEvent.origin Nur lesbar

Ein String, der den Ursprung des Nachrichten-Emitters darstellt.

MessageEvent.lastEventId Nur lesbar

Ein String, der eine eindeutige ID für das Ereignis darstellt.

MessageEvent.source Nur lesbar

Eine MessageEventSource (dies kann ein WindowProxy, MessagePort oder ServiceWorker Objekt sein), das den Nachrichten-Emitter darstellt.

MessageEvent.ports Nur lesbar

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

Dieses Interface erbt auch Methoden von seinem Elternteil, Event.

initMessageEvent() Veraltet

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

In unserem einfachen Beispiel mit einem geteilten Worker (geteilten Worker ausführen) haben wir zwei HTML-Seiten, von denen jede ein bisschen JavaScript verwendet, um eine Berechnung durchzuführen. Die verschiedenen Skripte benutzen dieselbe Worker-Datei, um die Berechnung durchzuführen — sie können beide darauf zugreifen, selbst wenn ihre Seiten in verschiedenen Fenstern ausgeführt werden.

Der folgende Codeausschnitt zeigt die Erstellung eines SharedWorker-Objekts unter Verwendung des SharedWorker()-Konstruktors. Beide Skripte enthalten dies:

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

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

myWorker.port.start();

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

first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.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");
};

Innerhalb des Workers verwenden wir den onconnect-Handler, um eine Verbindung zum oben genannten Port herzustellen. Die mit diesem Worker assoziierten Ports sind im ports-Eigentum des connect-Ereignisses zugänglich — wir verwenden dann die start()-Methode von MessagePort, um den Port zu starten, und den onmessage-Handler, um Nachrichten zu bearbeiten, die von den Haupt-Threads gesendet werden.

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

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