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 の定義
現行の標準  

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
MessageEventChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
dataChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
initMessageEvent
非推奨
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
lastEventIdChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
originChrome 完全対応 1Edge ? Firefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
portsChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
sourceChrome 完全対応 ありEdge ? Firefox 完全対応 55IE 未対応 なしOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 55Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。

関連情報

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

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

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