EventSource

EventSource インターフェイスは、 Server-sent event のウェブコンテンツのインターフェイスです。 EventSource インターフェイスは、 HTTP サーバーとの間で永続的なコネクションを開き、イベントを text/event-stream の形式で受け取ります。コネクションは EventSource.close() を呼び出して閉じられるまで開いたままになります。

いったんコネクションが開かれると、サーバーから入って来るメッセージは message イベントの形でコードに配信されます。

WebSocket とは異なり、 Server-sent event は単一方向です。つまり、データメッセージはサーバーからクライアント (たとえばユーザーのウェブブラウザー) に向けて、一方向に配信されます。これは、メッセージの形でクライアントからサーバーにデータを送る必要がない場合には良い選択です。例えば、 EventSource はソーシャルメディアの状況アップデートやニュースフィードのようなものを扱ったり、クライアント側ストレージ (IndexedDB や web storage など) の仕組みにデータを配信したりするアプローチに有用です。

EventSource()

指定された URL と、オプション資格情報モードから Server-sent event の受信を扱うために、新しい EventSource を生成します。

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

EventSource.readyState 読取専用

接続の状態を表す数値です。許容値は CONNECTING (0)、OPEN (1)、CLOSED (2) です。

EventSource.url 読取専用

ソースの URL を表す DOMString です。

EventSource.withCredentials 読取専用

Boolean で、 EventSource オブジェクトがオリジン間 (CORS) 資格情報を設定してインスタンス化されたか (true)、設定されずにインスタンス化されたか (false、既定値) を示します。

EventSource.onerror

エラーが発生して、EventSource オブジェクトで error イベントが発生したときに呼び出される EventHandler です。

EventSource.onmessage

message イベントを受け取ったとき、すなわち発信元からメッセージが到着したときに呼び出される EventHandler です。

EventSource.onopen

open イベントを受け取ったとき、すなわち接続を開始したときに呼び出される EventHandler です。

このインターフェイスは、親である EventTarget からメソッドを継承します。

EventSource.close()

接続を切断して、 readyState 属性を CLOSED に設定します。すでに切断されている場合は何も行いません。

error

イベントソースへのコネクションを開くことに失敗したときに発生します。

message

イベントソースからデータを受信したときに発生します。

open

イベントソースへのコネクションが開かれたときに発生します。

この基本的な例では、 EventSource を生成してサーバーからイベントを受け取ります。 sse.php という名前のページがイベントを生成する責任を負います。

var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
}

受信されたそれぞれのイベントは、 EventSource オブジェクトの onmessage イベントハンドラーを実行させます。ここでは、新しい <li> 要素を生成してその中にメッセージのデータを書き込み、この要素を文書の中にある既存のリスト要素に追加します。

• Server-sent event
• Server-sent event の使用