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 インターフェイスは対象のオブジェクトから受け取ったメッセージを表します。

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

このイベントによって引き起こされる動作は、対応する 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 — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。