MessageEvent

MessageEvent()

新しい MessageEvent を作成します。

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

MessageEvent.data 読取専用

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

MessageEvent.origin 読取専用

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

MessageEvent.lastEventId 読取専用

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

MessageEvent.source 読取専用

(WindowProxy、 MessagePort、ServiceWorker の何れかのオブジェクトの場合がある)  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.
}

• ExtendableMessageEvent — このインターフェイスに似ていますが、もっと柔軟性が必要なインターフェイスで使用されます。