DedicatedWorkerGlobalScope: событие message

Событие message срабатывает на объекте DedicatedWorkerGlobalScope, когда рабочий процесс получает сообщение от своего родительского элемента (т.е. когда родительский элемент отправляет сообщение с помощью Worker.postMessage()).

Это событие не может быть отменено и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("message", (event) => {});

onmessage = (event) => {};

Объект MessageEvent. Наследует от Event.

Этот интерфейс также наследует свойства от своего родителя, Event.

MessageEvent.data Только для чтения

Данные, отправленные источником сообщения.

MessageEvent.origin Только для чтения

Строка, представляющая происхождение источника сообщения.

MessageEvent.lastEventId Только для чтения

Строка, представляющая уникальный идентификатор события.

MessageEvent.source Только для чтения

Объект MessageEventSource (который может быть объектом Window, MessagePort или ServiceWorker), представляющий источник сообщения.

MessageEvent.ports Только для чтения

Массив объектов MessagePort, представляющих порты, связанные с каналом, через который отправляется сообщение (по мере необходимости, например, при обмене сообщениями по каналу или при отправке сообщения в общий рабочий процесс).

Следующий фрагмент кода демонстрирует создание объекта Worker с использованием конструктора Worker(). Сообщения передаются рабочему процессу, когда значение в поле ввода формы first изменяется. Также присутствует обработчик события onmessage для обработки сообщений, возвращаемых рабочим процессом.

// main.js

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

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

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

В скрипте main.js используется обработчик onmessage для обработки сообщений от скрипта рабочего процесса:

// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};

В качестве альтернативы, скрипт может прослушивать сообщения с помощью addEventListener():

// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});

Обратите внимание, как в основном скрипте onmessage должен вызываться на myWorker, в то время как внутри скрипта рабочего процесса достаточно onmessage , так как рабочий процесс фактически является глобальной областью видимости (DedicatedWorkerGlobalScope).

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

• DedicatedWorkerGlobalScope
• WorkerGlobalScope
• Связанные события: messageerror
• Worker.postMessage()
• Использование обмена сообщениями по каналу