Worker: Methode postMessage()
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: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.
Die postMessage()
Methode der Worker
Schnittstelle sendet eine Nachricht an den Worker. Der erste Parameter ist die Daten, die an den Worker gesendet werden sollen. Diese Daten können jedes JavaScript-Objekt sein, das vom structured clone algorithm verarbeitet werden kann.
Die Worker
postMessage()
Methode delegiert an die MessagePort
postMessage()
Methode, welche eine Aufgabe in die Ereignisschleife einfügt, die dem empfangenden MessagePort
entspricht.
Der Worker
kann Informationen an den Thread zurücksenden, der ihn erzeugt hat, mithilfe der DedicatedWorkerGlobalScope.postMessage
Methode.
Syntax
postMessage(message)
postMessage(message, transfer)
postMessage(message, options)
Parameter
message
-
Das Objekt, das an den Worker geliefert werden soll; dies wird im
data
Feld im Ereignis, das an dasmessage
Ereignis geliefert wird, enthalten sein. Dies kann jeder Wert oder JavaScript-Objekt sein, das vom structured clone Algorithmus verarbeitet wird, einschließlich zyklischer Referenzen.Der
message
Parameter ist obligatorisch. Wenn die Daten, die an den Worker übergeben werden sollen, unwichtig sind, mussnull
oderundefined
explizit übergeben werden. transfer
Optional-
Ein optionales Array von übertragbaren Objekten, deren Eigentum übertragen werden soll. Das Eigentum an diesen Objekten wird der Zielseite übergeben und sie sind auf der sendenden Seite nicht mehr verwendbar. Diese übertragbaren Objekte sollten mit der Nachricht verbunden werden; andernfalls würden sie verschoben, aber auf der Empfangsseite nicht tatsächlich zugänglich sein.
options
Optional-
Ein optionales Objekt mit den folgenden Eigenschaften:
transfer
Optional-
Hat die gleiche Bedeutung wie der
transfer
Parameter.
Rückgabewert
Keiner (undefined
).
Beispiele
Der folgende Codeabschnitt zeigt die Erstellung eines Worker
Objekts mithilfe des Worker()
Konstruktors. Wenn eine der beiden Formulareingaben (first
und second
) geändert wird, lösen change
Ereignisse postMessage()
aus, um den Wert beider Eingaben an den aktuellen Worker zu senden.
const myWorker = new Worker("worker.js");
[first, second].forEach((input) => {
input.onchange = () => {
myWorker.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
});
Für ein vollständiges Beispiel siehe unser einfaches Worker-Beispiel (Beispiel ausführen).
Note:
postMessage()
kann nur ein einziges Objekt auf einmal senden. Wie oben zu sehen ist, können Sie, wenn Sie mehrere Werte übergeben möchten, ein Array senden.
Transfer-Beispiel
Dieses minimale Beispiel lässt main
ein ArrayBuffer
erstellen und an myWorker
übertragen, dann lässt myWorker
es zurück an main
übertragen, wobei die Größe bei jedem Schritt protokolliert wird.
Haupt.js Code
// create worker
const myWorker = new Worker("myWorker.js");
// listen for myWorker to transfer the buffer back to main
myWorker.addEventListener("message", function handleMessageFromWorker(msg) {
console.log("message from worker received in main:", msg);
const bufTransferredBackFromWorker = msg.data;
console.log(
"buf.byteLength in main AFTER transfer back from worker:",
bufTransferredBackFromWorker.byteLength,
);
});
// create the buffer
const myBuf = new ArrayBuffer(8);
console.log(
"buf.byteLength in main BEFORE transfer to worker:",
myBuf.byteLength,
);
// send myBuf to myWorker and transfer the underlying ArrayBuffer
myWorker.postMessage(myBuf, [myBuf]);
console.log(
"buf.byteLength in main AFTER transfer to worker:",
myBuf.byteLength,
);
myWorker.js Code
// listen for main to transfer the buffer to myWorker
self.onmessage = function handleMessageFromMain(msg) {
console.log("message from main received in worker:", msg);
const bufTransferredFromMain = msg.data;
console.log(
"buf.byteLength in worker BEFORE transfer back to main:",
bufTransferredFromMain.byteLength,
);
// send buf back to main and transfer the underlying ArrayBuffer
self.postMessage(bufTransferredFromMain, [bufTransferredFromMain]);
console.log(
"buf.byteLength in worker AFTER transfer back to main:",
bufTransferredFromMain.byteLength,
);
};
Ausgabe protokolliert
buf.byteLength in main BEFORE transfer to worker: 8 main.js:19
buf.byteLength in main AFTER transfer to worker: 0 main.js:27
message from main received in worker: MessageEvent { ... } myWorker.js:3
buf.byteLength in worker BEFORE transfer back to main: 8 myWorker.js:7
buf.byteLength in worker AFTER transfer back to main: 0 myWorker.js:15
message from worker received in main: MessageEvent { ... } main.js:6
buf.byteLength in main AFTER transfer back from worker: 8 main.js:10
byteLength
wird nach der Übertragung des ArrayBuffer
zu 0. Für ein komplexeres, vollständig funktionierendes Beispiel der ArrayBuffer
Übertragung, siehe dieses Firefox-Demo-Addon: GitHub :: ChromeWorker - demo-transfer-arraybuffer
Spezifikationen
Specification |
---|
HTML # dom-worker-postmessage-dev |
Browser-Kompatibilität
Siehe auch
- Die
Worker
Schnittstelle, zu der sie gehört.