Worker: postMessage() Methode
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 verfügbar in Web Workers, außer in Service Workers.
Die postMessage()
-Methode des Worker
-Interfaces sendet eine Nachricht an den Worker. Der erste Parameter ist die zu sendenden Daten an den Worker. Die Daten können jedes JavaScript-Objekt sein, das durch den Structured Clone Algorithmus verarbeitet werden kann.
Die Worker
postMessage()
-Methode delegiert an die MessagePort
postMessage()
-Methode, die eine Aufgabe in der Ereignisschleife hinzufügt, die dem empfangenden MessagePort
entspricht.
Der Worker
kann Informationen zurück an den Thread senden, 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 übermittelt werden soll; es wird im
data
Feld im Event erscheinen, das an dasmessage
Event geliefert wird. Dies kann jeder Wert oder jedes JavaScript-Objekt sein, das durch den structured clone Algorithmus verarbeitet wird, einschließlich zyklischer Referenzen.Der
message
-Parameter ist obligatorisch. Wenn die an den Worker zu übergebenden Daten unwichtig sind, mussnull
oderundefined
explizit übergeben werden. transfer
Optional-
Ein optionales Array von übertragbaren Objekten, um die Eigentümerschaft zu übertragen. Das Eigentum an diesen Objekten wird auf die Empfängerseite übertragen und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte sollten an die Nachricht angehängt werden; andernfalls würden sie verschoben, aber auf der Empfängerseite nicht tatsächlich zugänglich sein.
options
Optional-
Ein optionales Objekt, das die folgenden Eigenschaften enthält:
transfer
Optional-
Hat dieselbe Bedeutung wie der
transfer
-Parameter.
Rückgabewert
Keiner (undefined
).
Beispiele
Der folgende Code zeigt die Erstellung eines Worker
-Objekts unter Verwendung des Worker()
-Konstruktors. Wenn sich der Wert eines der beiden Formulareingaben (first
und second
) ändert, rufen change
-Ereignisse postMessage()
auf, um den Wert beider Eingaben an den aktuellen Worker zu senden.
const myWorker = new Worker("worker.js");
first.onchange = () => {
myWorker.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
second.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).
Hinweis: postMessage()
kann nur ein einzelnes Objekt auf einmal senden. Wie oben gezeigt, können Sie, wenn Sie mehrere Werte übergeben möchten, ein Array senden.
Übertragungsbeispiel
Dieses minimalistische Beispiel lässt den main
ein ArrayBuffer
erstellen und an myWorker
übertragen, anschließend überträgt myWorker
es zurück an main
, wobei die Größe bei jedem Schritt geloggt wird.
main.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,
);
};
Geloggte Ausgabe
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 anspruchsvolleres, vollständig funktionierendes Beispiel zur Übertragung von ArrayBuffer
, schauen Sie sich dieses Firefox-Demo-Add-On an: GitHub :: ChromeWorker - demo-transfer-arraybuffer
Spezifikationen
Specification |
---|
HTML Standard # dom-worker-postmessage-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das
Worker
-Interface, zu dem es gehört.