この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

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

註: この機能は Web Workers 内で利用可能です。

コンストラクター

MessageEvent()
新しい MessageEvent を作成します。

プロパティ

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

MessageEvent.data 読取専用
メッセージエミッターによって送信されたデータ。
MessageEvent.origin 読取専用
メッセージエミッターの出所を表す USVString
MessageEvent.lastEventId 読取専用
イベントの一意の ID を表す DOMString
MessageEvent.source 読取専用
(WindowProxyMessagePort、 もしくは ServiceWorker オブジェクトの場合がある)  MessageEventSource で、メッセージエミッターを表します。
MessageEvent.ports 読取専用
メッセージが送信される (例えば、channel messaging や shared worker にメッセージを送信した場合) チャネルと対応したポートを表す MessagePort オブジェクトの配列です。 

メソッド

このインターフェースは親 Event から継承します。

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

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

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

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

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

myWorker.port.start();

ポートが開くと、どちらのスクリプトも worker にメッセージを送信し、送信されたメッセージを 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');
}

worker の内部では、同一のポートに接続するために SharedWorkerGlobalScope.onconnect ハンドラーを使っています。その worker と対応したポートは、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.
}

仕様

仕様書 策定状況 コメント
HTML Living Standard
MessageEvent の定義
現行の標準  

ブラウザー実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1 (有) 4.0 (2.0) 9 ? 10.0+
origin as USVString and source as MessageEventSource (有) ? 55.0 (55.0) 未サポート ? ?
機能 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ? 3.0+
origin as USVString and source as MessageEventSource ? ? 55.0 (55.0) 未サポート ? ?

See also

  • ExtendableMessageEvent — similar to this interface but used in interfaces that needs to give more flexibility to authors.

ドキュメントのタグと貢献者

このページの貢献者: toVersus
最終更新者: toVersus,