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 übergeordneten Kontext empfängt (d.h. wenn dieser eine Nachricht mit Worker.postMessage() sendet).
Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergereicht.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("message", (event) => { })
Alternativ können Sie einen Wert der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent. Erbt von Event.
Beispiel
Der folgende Codeausschnitt zeigt, wie mit dem Konstruktor Worker() ein Worker-Objekt erstellt wird. Wenn sich der Wert im Formulareingabefeld first ändert, werden Nachrichten an den Worker gesendet. Außerdem ist ein onmessage-Handler vorhanden, der die vom Worker zurückgesendeten Nachrichten verarbeitet.
// main.js
const myWorker = new Worker("worker.js");
first.onchange = () => {
myWorker.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
myWorker.onmessage = (e) => {
result.textContent = e.data;
console.log("Message received from worker");
};
Der Worker weist seinem globalen Gültigkeitsbereich einen onmessage-Handler zu (beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onmessage hinzugefügte Event-Listener ersetzt werden):
// 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);
};
Alternativ kann das Worker-Skript mit addEventListener() auf die Nachricht lauschen:
// worker.js
self.addEventListener("message", (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);
});
Beachten Sie, dass onmessage im Hauptskript auf myWorker definiert werden muss. Innerhalb des Worker-Skripts genügt dagegen onmessage, da der Worker selbst den globalen Gültigkeitsbereich (DedicatedWorkerGlobalScope) darstellt.
Ein vollständiges Beispiel finden Sie unter Einfaches Beispiel für einen Dedicated Worker (Dedicated Worker ausführen).
Spezifikationen
| Spezifikation |
|---|
| HTML # event-message |
| HTML # handler-messageeventtarget-onmessage |
Browser-Kompatibilität
Siehe auch
DedicatedWorkerGlobalScopeWorkerGlobalScope- Verwandte Ereignisse:
messageerror Worker.postMessage()- Channel Messaging verwenden