DedicatedWorkerGlobalScope: message イベント

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.

message イベントは、ワーカーが親からメッセージを受け取ったとき（つまり、親が Worker.postMessage() を使用してメッセージを送信したとき） DedicatedWorkerGlobalScope オブジェクトで発生します。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onmessage = (event) => {};

イベント型

MessageEvent です。 Event を継承しています。

Event MessageEvent

イベントプロパティ

このインターフェイスには、親である Event から継承したプロパティもあります。

MessageEvent.data 読取専用

メッセージ送信者から送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信者のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの固有の ID を表します。

MessageEvent.source 読取専用

MessageEventSource （Window, MessagePort, ServiceWorker の何れかのオブジェクトがなれる）で、メッセージ送信者を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャネルに関連するポートを表します（チャネルメッセージングや共有ワーカーにメッセージを送信する場合など、必要に応じて）。

例

以下のコードでは Worker オブジェクトを、 Worker() コンストラクターを用いて生成しています。フォームの入力欄 first 内の値が変更されると、メッセージがワーカーに渡されます。ワーカーから戻ってきたメッセージを処理するために、onmessage ハンドラーもあります。

js
// 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 ハンドラーを使用しています。

js
// main.js

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

他に、スクリプトで addEventListener() を使用してメッセージを待ち受けすることができます。

js
// worker.js

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

メインスクリプトでは onmessage を myWorker で呼び出す必要がありますが、ワーカススクリプトの内部では onmessage だけで済みます。ワーカーは事実上グローバルスコープ (DedicatedWorkerGlobalScope) になっているからです。

完全な例は、基本的な専用ワーカーの例を参照してください（専用ワーカーを実行）。

仕様書

Specification
HTML Standard
# event-message
HTML Standard
# handler-messageeventtarget-onmessage

ブラウザーの互換性

BCD tables only load in the browser

関連情報