MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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.};