Работник: метод postMessage()

Базовая поддержка Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Примечание: Эта функция доступна в Web Workers, за исключением Service Workers.

Метод postMessage() интерфейса Worker отправляет сообщение в рабочий процесс. Первый параметр — данные, которые нужно передать в рабочий процесс. Данные могут быть любым JavaScript-объектом, который может быть обработан алгоритмом структурированного клонирования.

Метод Worker postMessage() делегирует вызов методу MessagePort postMessage(), который добавляет задачу в очередь событий, соответствующую получающему MessagePort.

Рабочий процесс может отправлять информацию обратно потоку, который его запустил, с помощью метода DedicatedWorkerGlobalScope.postMessage.

Синтаксис

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

Параметры

message

Объект, который нужно передать в рабочий процесс; он будет находиться в поле data в событии, переданном в событие message. Это может быть любое значение или JavaScript-объект, обрабатываемый алгоритмом структурированного клонирования, включая циклические ссылки.

Параметр message обязателен. Если данные, передаваемые в рабочий процесс, не важны, необходимо явно указать null или undefined.

transfer Необязательно

Необязательный массив массивов передаваемых объектов для передачи права собственности. Право собственности на эти объекты передается стороне назначения, и они больше не могут использоваться на отправляющей стороне. Эти передаваемые объекты должны быть прикреплены к сообщению; в противном случае они будут перемещены, но фактически недоступны для получателя.

options Необязательно

Необязательный объект, содержащий следующие свойства:

transfer Необязательно: Имеет то же значение, что и параметр transfer.

Возвращаемое значение

Ничего (undefined).

Примеры

Следующий фрагмент кода демонстрирует создание объекта Worker с помощью конструктора Worker(). При изменении значений любого из двух элементов формы (first и second) события change вызывают postMessage() для отправки значения обоих элементов в текущий рабочий процесс.

const myWorker = new Worker("worker.js");

[first, second].forEach((input) => {
  input.onchange = () => {
    myWorker.port.postMessage([first.value, second.value]);
    console.log("Message posted to worker");
  };
});

Полный пример см. в нашем примере простого рабочего процесса (запустить пример).

Примечание: postMessage() может передать только один объект за раз. Как показано выше, если вам нужно передать несколько значений, можно передать массив.

Пример передачи

В этом минимальном примере main создает ArrayBuffer и передает его myWorker, а затем myWorker передает его обратно main, выводит размер на каждом шаге.

Код main.js

// 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

// 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,
  );
};

Выведенный результат

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 становится 0 после передачи ArrayBuffer. Для более сложного полного рабочего примера передачи ArrayBuffer см. этот плагин дополнения Firefox: GitHub :: ChromeWorker - demo-transfer-arraybuffer

Спецификации

Спецификация
HTML # dom-worker-postmessage-dev

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`postMessage`	2	12	3.5	10.6	4	18	4	11	5	1.0	4.4
`options_includeUserActivation_parameter`	72	79	Нет	60	Нет	72	Нет	51	Нет	11.0	72

См. также

Интерфейс Worker, к которому он относится.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage