MessageEvent

MessageEvent インターフェイスは対象のオブジェクトから受け取ったメッセージを表します。

次のメッセージを表すために使用されます。

このイベントによって引き起こされる動作は、対応する message イベント(例えば、 上記の onmessage ハンドラーを使ったもの)のイベントハンドラーとして設定された関数の中で定義されています。

メモ: この機能はウェブワーカー内で利用可能です。

Event MessageEvent

コンストラクター

MessageEvent()

新しい MessageEvent を作成します。

インスタンスプロパティ

このインターフェイスは親である Event からプロパティを継承しています。

MessageEvent.data 読取専用

メッセージ送信元によって送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信元のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの一意の ID を表します。

MessageEvent.source 読取専用

MessageEventSourceWindowProxyMessagePortServiceWorker の何れかのオブジェクト)で、メッセージの送信元を表します。

MessageEvent.ports 読取専用

MessagePort オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。

インスタンスメソッド

このインターフェイスは親である Event からメソッドを継承してします。

initMessageEvent() 非推奨

メッセージイベントを初期化します。これ以上このメソッドを使用しないでください。代わりに、MessageEvent() コンストラクターを使用してください。

基本的な共有ワーカーの例共有ワーカーを実行)には 2 つの HTML ページがあり、それぞれのページが単純な計算をする JavaScript を実行しています。異なるスクリプトが計算を実行するために同一のワーカーファイルを使用しています。ページの異なるウィンドウ内で動作していても、どちらのスクリプトもワーカーファイルにアクセスできます。

次のコードスニペットは、 SharedWorker オブジェクトの作成を SharedWorker() コンストラクターを使用して行う様子を示しています。どちらのスクリプトもこれを含んでいます。

js
const myWorker = new SharedWorker("worker.js");

次にどちらのスクリプトも SharedWorker.port プロパティで作成された MessagePort オブジェクトを通してワーカーにアクセスします。 onmessage イベントが addEventListener で装着されると、 start() メソッドでポートが手動で開きます。

js
myWorker.port.start();

ポートが開くと、どちらのスクリプトもワーカーにメッセージを送信し、送信されたメッセージを port.postMessage()port.onmessage でそれぞれ処理します。

js
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 プロパティで接続可能です。その後、ポートを開くために MessagePortstart() メソッドを、メインのスレッドから送信されたメッセージを処理するために onmessage ハンドラーを使用します。

js
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 — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。