onmessage イベント

DOM イベント Event オブジェクト

定義と使用法

イベントソースを通じてメッセージを受け取るときに、onmessage イベントが発生します。

onmessage イベントの event オブジェクトは以下の属性をサポートしています：

  • data - 実際のメッセージを含む
  • origin - イベントを発生させたドキュメントの URL
  • lastEventId - イベントストリームで見た最後のメッセージの識別子

関連イベント：

  • onopen サーバーとの接続が開かれたときに発生
  • onerror 問題が発生したときに発生

サーバー送信イベント（Server-Sent Events）についての詳細については、以下のチュートリアルを学んでください： HTML5 サーバー送信イベントチュートリアル。

インスタンス

例 1

新しい EventSource オブジェクトを作成し、更新を送信するページの URL を指定します。

更新が受け取られるたびに、onmessage イベントが発生します。onmessage イベントが発生したとき、受け取ったデータは id="myDIV" の <div> 要素に格納されます：

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("myDIV").innerHTML += event.data + "<br>";
};

自分で試してみてください

例 2

onmessage イベントを発生させるドキュメントの URL を取得：

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("myDIV").innerHTML = event.origin;
};

結果は以下のようになります：

https://www.codew3c.com/

自分で試してみてください

文法

object.onmessage = function(){myScript};

自分で試してみてください

addEventListener() メソッドの使用：

object.addEventListener("message", myScript);

自分で試してみてください

注釈：Internet Explorer 8 以降のバージョンではサポートされていません addEventListener() メソッド。

技術的詳細

バブル： サポートしていない
キャンセル可能： サポートしていない
イベントタイプ： Event

ブラウザサポート

このテーブルの数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
onmessage 9.0 サポートしていない 6.0 5.0 11.0
DOM イベント Event オブジェクト