MessageEvent
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.
MessageEvent
インターフェイスは対象のオブジェクトから受け取ったメッセージを表します。
次のメッセージを表すために使用されます。
- サーバー送信イベント (
EventSource.message_event
を参照)。 - ウェブソケット (WebSocket インターフェイスの
onmessage
プロパティを参照)。 - 文書間のメッセージ(
Window.postMessage()
およびWindow.message_event
を参照)。 - チャンネルメッセージ (
MessagePort.postMessage()
およびMessagePort.message_event
を参照)。 - ワーカー/文書間メッセージ(上記 2 項目ほか、
Worker.postMessage()
,Worker.message_event
,ServiceWorkerGlobalScope.message_event
なども参照)。 - ブロードキャストチャンネル (
Broadcastchannel.postMessage()
) およびBroadcastChannel.message_event
を参照).
このイベントによって引き起こされる動作は、対応する message
イベント(例えば、 上記の onmessage
ハンドラーを使ったもの)のイベントハンドラーとして設定された関数の中で定義されています。
メモ: この機能はウェブワーカー内で利用可能です。
コンストラクター
MessageEvent()
-
新しい
MessageEvent
を作成します。
インスタンスプロパティ
このインターフェイスは親である Event
からプロパティを継承しています。
MessageEvent.data
読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin
読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId
読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source
読取専用-
MessageEventSource
(WindowProxy、MessagePort
、ServiceWorker
の何れかのオブジェクト)で、メッセージの送信元を表します。 MessageEvent.ports
読取専用-
MessagePort
オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。
インスタンスメソッド
このインターフェイスは親である Event
からメソッドを継承してします。
initMessageEvent()
非推奨;-
メッセージイベントを初期化します。これ以上このメソッドを使用しないでください。代わりに、
MessageEvent()
コンストラクターを使用してください。
例
基本的な共有ワーカーの例(共有ワーカーを実行)には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。
次のコードスニペットは、 SharedWorker
オブジェクトの作成を SharedWorker()
コンストラクターを使用して行う様子を示しています。どちらのスクリプトもこれを含んでいます。
const myWorker = new SharedWorker("worker.js");
次にどちらのスクリプトも SharedWorker.port
プロパティで作成された MessagePort
オブジェクトを通してワーカーにアクセスします。 onmessage イベントが addEventListener で装着されると、 start()
メソッドでポートが手動で開きます。
myWorker.port.start();
ポートが開くと、どちらのスクリプトもワーカーにメッセージを送信し、送信されたメッセージを port.postMessage()
と port.onmessage
でそれぞれ処理します。
first.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
second.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
myWorker.port.onmessage = (e) => {
result1.textContent = e.data;
console.log("Message received from worker");
};
ワーカーの内部では、 onconnect
ハンドラーを使用して上記の同一のポートに接続しています。そのワーカーと関連付けられたポートは、connect
イベントの ports
プロパティで接続可能です。その後、ポートを開くために MessagePort
の start()
メソッドを、メインのスレッドから送信されたメッセージを処理するために onmessage
ハンドラーを使用します。
onconnect = (e) => {
const port = e.ports[0];
port.addEventListener("message", (e) => {
const workerResult = `Result: ${e.data[0] * e.data[1]}`;
port.postMessage(workerResult);
});
port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};
仕様書
Specification |
---|
HTML Standard # the-messageevent-interface |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
ExtendableMessageEvent
— このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。