DedicatedWorkerGlobalScope: message イベント

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

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

onmessage = (event) => {};

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

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

MessageEvent.data 読取専用

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

MessageEvent.origin 読取専用

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

MessageEvent.lastEventId 読取専用

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

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()
• チャンネルメッセージングの使用