MessageEvent
インターフェースは対象のオブジェクトから受け取ったメッセージを表します。
次のメッセージを表すために使用されます。
- Server-sent events (
EventSource.onmessage
を参照). - Web sockets (WebSocket インターフェースの
onmessage
プロパティを参照). - Cross-document messaging (
Window.postMessage()
およびWindow.onmessage
を参照). - Channel messaging (
MessagePort.postMessage()
およびMessagePort.onmessage
を参照). - Cross-worker/document messaging (上記 2エントリほか、
Worker.postMessage()
,Worker.onmessage
,ServiceWorkerGlobalScope.onmessage
なども参照) - Broadcast channels (
Broadcastchannel.postMessage()
) およびBroadcastChannel.onmessage
を参照). - WebRTC データチャネル (
RTCDataChannel.onmessage
を参照).
このイベントによって引き起こされるアクションは、対応する message
イベント (例えば、 上記の onmessage
ハンドラーを使ったもの) のイベントハンドラーとして設定された関数の中で定義されています。
コンストラクター
MessageEvent()
- 新しい
MessageEvent
を作成します。
プロパティ
このインターフェースは親 Event
からプロパティを継承します。
MessageEvent.data
読取専用- メッセージエミッターによって送信されたデータ。
MessageEvent.origin
読取専用- メッセージエミッターの出所を表す
USVString
。 MessageEvent.lastEventId
読取専用- イベントの一意の ID を表す
DOMString
。 MessageEvent.source
読取専用- (
WindowProxy
、MessagePort
、 もしくは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 の定義 |
現行の標準 |
ブラウザの互換性
BCD tables only load in the browser
関連情報
ExtendableMessageEvent
— similar to this interface but used in interfaces that needs to give more flexibility to authors.