DedicatedWorkerGlobalScope: message Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist nur in Dedicated Web Workers verfügbar.
Das message Ereignis wird auf einem DedicatedWorkerGlobalScope Objekt ausgelöst, wenn der Worker eine Nachricht von seinem Elternteil erhält (d.h. wenn das Elternteil eine Nachricht mittels Worker.postMessage() sendet).
Dieses Ereignis kann nicht abgebrochen werden und blubbert nicht.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("message", (event) => { })
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent. Erbt von Event.
Beispiel
Der folgende Codeausschnitt zeigt die Erstellung eines Worker Objekts mittels 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 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 Script 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 auf die Nachricht mittels addEventListener() warten:
// worker.js
self.addEventListener("message", (e) => {
result.textContent = e.data;
console.log("Message received from worker");
});
Beachten Sie, wie im Hauptskript onmessage auf myWorker aufgerufen werden muss, während im Worker-Skript nur onmessage benötigt wird, da der Worker effektiv der globale Scope ist (DedicatedWorkerGlobalScope).
Für ein vollständiges Beispiel siehe unser Grundlegendes Beispiel für einen dedizierten Worker (dedizierten Worker ausführen).
Spezifikationen
| Spezifikation |
|---|
| HTML # event-message |
| HTML # handler-messageeventtarget-onmessage |