Worker: postMessage() Methode

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 in Web Workers verfügbar, mit Ausnahme von Service Workers.

Die postMessage() Methode des Worker-Interfaces sendet eine Nachricht an den Worker. Der erste Parameter ist die Daten, die an den Worker gesendet werden sollen. Die 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, die eine Aufgabe in die Ereignisschleife für den empfangenden MessagePort einfügt.

Der Worker kann mithilfe der DedicatedWorkerGlobalScope.postMessage Methode Informationen an den Thread zurücksenden, der ihn erstellt hat.

Syntax

postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

Parameter

message

Das Objekt, das an den Worker übermittelt wird; dies befindet sich im data Feld im an das message Ereignis gelieferten Event. Dies kann jeder Wert oder ein JavaScript-Objekt sein, das vom structured clone Algorithmus verarbeitet wird und zyklische Referenzen einschließt.

Der message Parameter ist erforderlich. Wenn die an den Worker zu übergebenden Daten nicht wichtig sind, müssen null oder undefined explizit übergeben werden.

transfer Optional

Ein optionales Array von transferierbaren Objekten, deren Eigentum übertragen werden soll. Das Eigentum dieser Objekte wird an die Zielseite gegeben und sie sind auf der sendenden Seite nicht mehr nutzbar. Diese übertragbaren Objekte werden nicht automatisch gesendet; sie müssen entweder in der Nachricht enthalten sein oder dem Empfänger über andere Mittel zugänglich gemacht werden, wie z.B. MessagePort über MessageEvent.ports.

options Optional

Ein optionales Objekt mit den folgenden Eigenschaften:

transfer Optional: Hat dieselbe Bedeutung wie der transfer Parameter.

Rückgabewert

Keiner (undefined).

Beispiele

Das folgende Codebeispiel zeigt die Erstellung eines Worker-Objekts mit dem Worker() Konstruktor. Wenn bei einem der beiden Formulareingaben (first und second) die Werte geändert werden, rufen change Ereignisse postMessage() auf, 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).

Hinweis: postMessage() kann nur ein einzelnes Objekt gleichzeitig senden. Wie oben gezeigt, können Sie, wenn Sie mehrere Werte übergeben möchten, ein Array senden.

Transfer-Beispiel

Dieses Minimalbeispiel lässt main einen ArrayBuffer erstellen und an myWorker übertragen, woraufhin myWorker ihn zurück an main überträgt, wobei die Größe bei jedem Schritt protokolliert 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", (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 = (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,
  );
};

Protokollierte Ausgabe

bash

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 zu 0, nachdem der ArrayBuffer übertragen wurde. Für ein ausgefeilteres, vollständiges Arbeitsbeispiel der ArrayBuffer-Übertragung, siehe dieses Firefox-Demo-Add-On: GitHub :: ChromeWorker - demo-transfer-arraybuffer

Spezifikationen

Spezifikation
HTML # dom-worker-postmessage-dev

Browser-Kompatibilität

Siehe auch

Das Worker Interface, zu dem es gehört.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden