DOM

インターフェイス

EventSource インターフェイス

→●、MS

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

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

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

コンストラクター

new EventSource() ●

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

プロパティ

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

EventSource.readyState 読取専用 ●

接続の状態を表す数値です。

定義名	数値	意味
CONNECTING	0	接続は、まだ確立されていないか、または close されていてユーザー･エージェントは再接続している。
OPEN	1	ユーザー･エージェントは、open 接続を有していて、イベントが受信され次第 それを配送している。
CLOSED	2	接続は open しておらず、UA は再接続しようと試行していない。何らかの致命的エラーがあったか、close() メソッドが呼び出された。

EventSource.url 読取専用 ●

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

EventSource.withCredentials 読取専用 ●

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

メソッド

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

EventSource.close() ●

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

イベントハンドラー

EventSource.onerror

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

EventSource.onmessage

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

EventSource.onopen

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

イベント

error

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

message

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

open

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

例

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);
}

テスト