DedicatedWorkerGlobalScope: message イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
message イベントは、ワーカーが親からメッセージを受け取ったとき（つまり、親が Worker.postMessage() を使用してメッセージを送信したとき） DedicatedWorkerGlobalScope オブジェクトで発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を 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) になっているからです。
完全な例は、基本的な専用ワーカーの例を参照してください（専用ワーカーを実行）。
仕様書
| 仕様書 |
|---|
| HTML # event-message |
| HTML # handler-messageeventtarget-onmessage |