MessageEvent

Интерфейс MessageEvent представляет собой сообщение, полученное целевым объектом.

Используется для представления сообщений в:

• Потоковых событиях сервера (см. событие message EventSource).
• Веб-сокеты (см. событие message WebSocket).
• Обмене сообщениями между документами (см. Window.postMessage() и событие message Window).
• Обмене сообщениями через каналы (см. MessagePort.postMessage() и событие message MessagePort).
• Обмене сообщениями между рабочими потоками/документами (см. вышеуказанные пункты, а также Worker.postMessage(), событие message Worker, событие message ServiceWorkerGlobalScope и т. д.)
• Каналы широковещательной рассылки (см. BroadcastChannel.postMessage() и событие message BroadcastChannel).
• Каналы данных WebRTC (см. событие message RTCDataChannel).

Действие, вызываемое этим событием, определяется в функции, установленной в качестве обработчика событий для соответствующего события message.

MessageEvent()

Создаёт новый MessageEvent.

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

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

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

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

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

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

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

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

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

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

Массив объектов MessagePort, содержащих все объекты MessagePort, отправленные с сообщением в порядке.

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

initMessageEvent() Устарел

Инициализирует событие сообщения. Не используйте это больше — используйте конструктор MessageEvent() вместо этого.

В нашем примере с общим рабочим потоком (запустить общий рабочий поток) у нас есть две HTML-страницы, каждая из которых использует JavaScript для выполнения вычислений. Разные скрипты используют один и тот же файл рабочего потока для выполнения вычислений — они оба могут получить к нему доступ, даже если их страницы выполняются в разных окнах.

Следующий фрагмент кода демонстрирует создание объекта SharedWorker с помощью конструктора SharedWorker(). Оба скрипта содержат это:

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

Затем оба скрипта обращаются к рабочему потоку через объект MessagePort, созданный с помощью свойства SharedWorker.port. Если обработчик события onmessage прикреплён с помощью addEventListener, порт запускается вручную с помощью метода start().

myWorker.port.start();

После запуска порта оба скрипта отправляют сообщения в рабочий поток и обрабатывают сообщения, отправленные из него, соответственно, с помощью port.postMessage() и port.onmessage.

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

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

Внутри рабочего потока мы используем обработчик onconnect для подключения к тому же порту, который обсуждался выше. Порты, связанные с этим рабочим потоком, доступны в свойстве connect события connect — затем мы используем метод MessagePort объекта MessagePort, чтобы запустить порт, и обработчик onmessage для обработки сообщений, отправленных из основных потоков.

onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

• ExtendableMessageEvent — аналогично этому интерфейсу, но используется в интерфейсах, которые требуют большей гибкости для авторов.