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!");
仕様書
Specification |
---|
HTML Standard # event-message |
ブラウザーの互換性
BCD tables only load in the browser