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 einWindow
,MessagePort
oderServiceWorker
-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
Siehe auch
DedicatedWorkerGlobalScope
WorkerGlobalScope
- Verwandte Ereignisse:
messageerror
Worker.postMessage()
- Verwendung von Kanalmeldungen