Worker: message イベント
message イベントは Worker オブジェクトで、ワーカーの親がワーカーからメッセージを受け取ったとき(すなわち、ワーカーが DedicatedWorkerGlobalScope.postMessage() を用いてメッセージを送信したとき)に発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
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() を用いてメッセージを待ち受けします。
js
const worker = new Worker("static/scripts/worker.js");
worker.addEventListener('message', (event) => {
console.log(`Received message from worker: ${event.data}`)
});
他にも、 onmessage イベントハンドラープロパティを使用して待ち受けすることもできます。
js
const worker = new Worker("static/scripts/worker.js");
worker.onmessage = (event) => {
console.log(`Received message from worker: ${event.data}`)
};
ワーカーは self.postMessage() を使用してメッセージを送信します。
js
// static/scripts/worker.js
self.postMessage('I\'m alive!');
仕様書
| Specification |
|---|
| HTML Standard # event-message |
ブラウザーの互換性
BCD tables only load in the browser