DedicatedWorkerGlobalScope: message イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
message
イベントは、ワーカーが親からメッセージを受け取ったとき(つまり、親が Worker.postMessage()
を使用してメッセージを送信したとき) DedicatedWorkerGlobalScope
オブジェクトで発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
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
ハンドラーもあります。
// 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
ハンドラーを使用しています。
// main.js
myWorker.onmessage = (e) => {
result.textContent = e.data;
console.log("Message received from worker");
};
他に、スクリプトで addEventListener()
を使用してメッセージを待ち受けすることができます。
// 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