MessageEvent

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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MessageEventChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
MessageEvent() constructorChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera ? Safari 完全対応 10WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
dataChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
initMessageEvent
非推奨
Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
lastEventIdChrome 完全対応 1Edge 完全対応 17Firefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
originChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
portsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
sourceChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 55IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 あり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.