DedicatedWorkerGlobalScope: message event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("message", (event) => {});

onmessage = (event) => {};

Ein MessageEvent. Erbt von Event.

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil Event.

MessageEvent.data Schreibgeschützt

Die von dem Nachrichtensender gesendeten Daten.

MessageEvent.origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtensenders darstellt.

MessageEvent.lastEventId Schreibgeschützt

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

MessageEvent.source Schreibgeschützt

Eine MessageEventSource (die ein Window, MessagePort oder ServiceWorker-Objekt sein kann), die den Nachrichtensender darstellt.

MessageEvent.ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die mit dem Kanal, durch den die Nachricht gesendet wird, assoziierten Ports darstellen (wo zutreffend, z.B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen geteilten Worker).

Der folgende Codeausschnitt zeigt die Erstellung eines Worker-Objekts unter Verwendung des Worker()-Konstruktors. Nachrichten werden an den Worker gesendet, wenn sich der Wert im Formulareingabefeld first ändert. Ein onmessage-Handler ist ebenfalls vorhanden, um mit Nachrichten umzugehen, die vom Worker zurückgesendet werden.

// main.js

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

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

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

Im main.js-Skript wird ein onmessage-Handler verwendet, um Nachrichten aus dem Worker-Skript zu verarbeiten:

// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};

Alternativ kann das Skript das Ereignis mithilfe von addEventListener() abhören:

// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});

Beachten Sie, dass im Hauptskript onmessage auf myWorker aufgerufen werden muss, während innerhalb des Worker-Skripts nur onmessage benötigt wird, da der Worker effektiv den globalen Gültigkeitsbereich (DedicatedWorkerGlobalScope) darstellt.

Für ein vollständiges Beispiel siehe unser Einfaches Beispiel für einen dedizierten Worker (dedizierten Worker ausführen).

• DedicatedWorkerGlobalScope
• WorkerGlobalScope
• Verwandte Ereignisse: messageerror
• Worker.postMessage()
• Verwendung der Kanalnachrichtenübermittlung