DedicatedWorkerGlobalScope: message イベント
message
イベントは、ワーカーが親からメッセージを受け取ったとき(つまり、親が Worker.postMessage()
を使用してメッセージを送信したとき) DedicatedWorkerGlobalScope
オブジェクトで発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
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
ハンドラーもあります。
js
// 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
ハンドラーを使用しています。
js
// main.js
myWorker.onmessage = (e) => {
result.textContent = e.data;
console.log("Message received from worker");
};
他に、スクリプトで addEventListener()
を使用してメッセージを待ち受けすることができます。
js
// worker.js
self.addEventListener("message", (e) => {
result.textContent = e.data;
console.log("Message received from worker");
});
メインスクリプトでは onmessage
を myWorker
で呼び出す必要がありますが、ワーカススクリプトの内部では onmessage
だけで済みます。ワーカーは事実上グローバルスコープ (DedicatedWorkerGlobalScope
) になっているからです。
完全な例は、基本的な専用ワーカーの例を参照してください(専用ワーカーを実行)。
仕様書
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-dedicatedworkerglobalscope-onmessage |
ブラウザーの互換性
BCD tables only load in the browser