DedicatedWorkerGlobalScope: message event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-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 Daten, die vom Nachrichtensender gesendet wurden.

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, ein MessagePort oder ein ServiceWorker-Objekt sein kann), das den Nachrichtensender darstellt.

MessageEvent.ports Schreibgeschützt

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

Der folgende Codeausschnitt zeigt die Erstellung eines Worker-Objekts mit dem Worker()-Konstruktor. Nachrichten werden an den Worker übergeben, wenn sich der Wert im Formulareingabefeld first ändert. Ein onmessage-Handler ist ebenfalls vorhanden, um Nachrichten zu bearbeiten, 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 bearbeiten:

// main.js

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

Alternativ kann das Skript auf die Nachricht mit addEventListener() lauschen:

// 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 im Worker-Skript nur onmessage benötigt wird, da der Worker effektiv der globale Kontext ist (DedicatedWorkerGlobalScope).

Ein vollständiges Beispiel finden Sie in unserem Grundlegendes Beispiel für einen dedizierten Worker (dedizierten Worker ausführen).

• DedicatedWorkerGlobalScope
• WorkerGlobalScope
• Verwandte Ereignisse: messageerror
• Worker.postMessage()
• Verwendung von Kanalnachrichten