Worker: message イベント

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

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

構文

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

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

イベント型

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

イベントプロパティ

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

MessageEvent.data 読取専用

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

MessageEvent.origin 読取専用

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

MessageEvent.lastEventId 読取専用

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

MessageEvent.source 読取専用

MessageEventSource (WindowProxy, MessagePort, ServiceWorker のいずれかのオブジェクトがなれる)で、メッセージ送信者を表します。

MessageEvent.ports 読取専用

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

例

このコードでは、新しいワーカーを生成して、 addEventListener() を用いてメッセージを待ち受けします。

const worker = new Worker("static/scripts/worker.js");
worker.addEventListener("message", (event) => {
 console.log(`Received message from worker: ${event.data}`);
});

他にも、 onmessage イベントハンドラープロパティを使用して待ち受けすることもできます。

const worker = new Worker("static/scripts/worker.js");
worker.onmessage = (event) => {
 console.log(`Received message from worker: ${event.data}`);
};

ワーカーは self.postMessage() を使用してメッセージを送信します。

// static/scripts/worker.js
self.postMessage("I'm alive!");

仕様書

ブラウザーの互換性

関連情報

• 関連イベント: messageerror.
• DedicatedWorkerGlobalScope.postMessage().