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