MessageEvent

MessageEvent()

Erstellt ein neues MessageEvent.

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, Event.

MessageEvent.data Nur lesbar

Die vom Nachrichtensender gesendeten Daten.

MessageEvent.origin Nur lesbar

Ein String, der die Herkunft des Nachrichtensenders repräsentiert.

MessageEvent.lastEventId Nur lesbar

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

MessageEvent.source Nur lesbar

Eine MessageEventSource (die ein WindowProxy, ein MessagePort oder ServiceWorker-Objekt sein kann) die den Nachrichtensender repräsentiert.

MessageEvent.ports Nur lesbar

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

Diese Schnittstelle erbt auch Methoden von ihrem Elternteil, Event.

initMessageEvent() Veraltet

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

In unserem Basic shared worker example (gemeinsamen Worker ausführen) haben wir zwei HTML-Seiten, die jeweils JavaScript verwenden, um eine einfache Berechnung durchzuführen. Die unterschiedlichen Skripte verwenden die gleiche Worker-Datei, um die Berechnung auszuführen — beide können darauf zugreifen, auch wenn ihre Seiten in verschiedenen Fenstern ausgeführt werden.

Der folgende Code-Ausschnitt zeigt die Erstellung eines SharedWorker-Objekts mithilfe des SharedWorker()-Konstruktors. Beide Skripte enthalten dies:

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

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

myWorker.port.start();

Sobald der Port gestartet ist, senden beide Skripte Nachrichten an den Worker und verarbeiten Nachrichten, die von diesem gesendet werden, indem sie port.postMessage() und port.onmessage verwenden:

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

Im Worker verwenden wir den onconnect-Handler, um eine Verbindung zu dem oben diskutierten Port herzustellen. Die mit diesem Worker verbundenen Ports sind in der 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 mit den aus den Hauptthreads gesendeten Nachrichten umzugehen.

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 wie diese Schnittstelle, jedoch in Schnittstellen verwendet, die Autoren mehr Flexibilität bieten müssen.