MessageEvent

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

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

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

注: この機能は Web Worker 内で利用可能です

Event MessageEvent

コンストラクター

MessageEvent()

新しい MessageEvent を作成します。

プロパティ

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

MessageEvent.data 読取専用

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

MessageEvent.origin 読取専用

メッセージ送信元の出所を表す USVString

MessageEvent.lastEventId 読取専用

イベントの一意の ID を表す DOMString

MessageEvent.source 読取専用

(WindowProxyMessagePortServiceWorker の何れかのオブジェクトの場合がある)  MessageEventSource で、メッセージ送信元を表します。

MessageEvent.ports 読取専用

メッセージが送信される(例えば、チャンネルメッセージや共有ワーカーにメッセージを送信した場合)チャンネルと対応したポートを表す MessagePort オブジェクトの配列です。

メソッド

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

initMessageEvent() Deprecated

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

例>

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

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

var myWorker = new SharedWorker('worker.js');

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

myWorker.port.start();

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

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('Message received from worker');
}

ワーカーの内部では、 onconnect ハンドラーを使用して上記の同一のポートに接続しています。そのワーカーと関連付けられたポートは、connect イベントの ports プロパティで接続可能です。その後、ポートを開くために MessagePort の start() メソッドを、メインのスレッドから送信されたメッセージを処理するために onmessage ハンドラーを使用します。

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var 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 — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。