DedicatedWorkerGlobalScope: message-Ereignis

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: Dieses Feature ist nur verfügbar in Dedicated Web Workers.

Das message-Ereignis wird auf einem DedicatedWorkerGlobalScope-Objekt ausgelöst, wenn der Worker eine Nachricht von seinem übergeordneten Element erhält (d. h. wenn das übergeordnete Element eine Nachricht mit Worker.postMessage() sendet).

Dieses Ereignis ist nicht stornierbar und nicht bubbling.

Syntax

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

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

onmessage = (event) => {};

Ereignistyp

Ein MessageEvent. Erbaut von Event.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element, Event.

MessageEvent.data Nur lesbar: Die von dem Nachrichtensender gesendeten Daten.
MessageEvent.origin Nur lesbar: Ein String, der die Herkunft des Nachrichtensenders darstellt.
MessageEvent.lastEventId Nur lesbar: Ein String, der eine eindeutige ID für das Ereignis darstellt.
MessageEvent.source Nur lesbar: Ein MessageEventSource (kann ein Window, MessagePort oder ServiceWorker-Objekt sein), das den Nachrichtensender darstellt.
MessageEvent.ports Nur lesbar: Ein Array von MessagePort-Objekten, die die Ports darstellen, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (wo zutreffend, z.B. im Kanalmessaging oder beim Senden einer Nachricht an einen gemeinsam genutzten Worker).

Beispiel

Der folgende Codeausschnitt zeigt die Erstellung eines Worker-Objekts mit dem Worker()-Konstruktor. Nachrichten werden an den Worker gesendet, wenn sich der Wert des Formulareingabefeldes first ändert. Ein onmessage-Handler ist ebenfalls vorhanden, um mit zurückgesendeten Nachrichten vom Worker umzugehen.

// 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 vom Worker-Skript zu verarbeiten:

// main.js

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

Alternativ kann das Skript mithilfe von addEventListener() auf das Ereignis hö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 im Worker-Skript nur onmessage erforderlich ist, da der Worker im Wesentlichen der globale Kontext ist (DedicatedWorkerGlobalScope).

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

Spezifikationen

Specification
HTML Standard # event-message
HTML Standard # handler-dedicatedworkerglobalscope-onmessage

Browser-Kompatibilität

BCD tables only load in the browser