MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

EventSource

EventSource インターフェイスは、Server-sent events を受け取るために使用します。HTTP でサーバーと接続して、接続を切断せずに text/event-stream 形式でイベントを受信します。

コンストラクター

EventSource()
指定した USVString から、新しい EventSource を作成します。

プロパティ

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

EventSource.readyState 読取専用
接続の状態を表す数値です。許容値は CONNECTING (0)、OPEN (1)、CLOSED (2) です。
EventSource.url 読取専用
ソースの URL を表す DOMString です。
EventSource.withCredentials 読取専用
EventSource オブジェクトが、CORS クレデンシャルを設定してインスタンス化されたか (true)、設定されずにインスタンス化されたか (false、既定値) を示す Boolean です。

イベントハンドラー

EventSource.onerror
エラーが発生して、EventSource オブジェクトで error イベントが発生したときに呼び出される EventHandler です。
EventSource.onmessage
message イベントを受け取ったとき、すなわち発信元からメッセージが到着したときに呼び出される EventHandler です。
EventSource.onopen
open イベントを受け取ったとき、すなわち接続を開始したときに呼び出される EventHandler です。

メソッド

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

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

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

注記: この例の全容が GitHub にあります。Simple SSE demo using PHP をご覧ください。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
EventSource の定義
現行の標準  

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
EventSource のサポート 6 未サポート 6.0 (6.0) 未サポート (有) 5
shared worker、dedicated worker で使用可能[1] (有) 未サポート 53.0 (53.0) 未サポート (有) (有)
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
EventSource のサポート 4.4 45 未サポート 12 4.1
shared worker、dedicated worker で使用可能[1] (有) 53.0 (53.0) 未サポート (有) (有)

[1] service worker は未サポートです

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,