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

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

WebSocket とは異なり、 Server-sent event は単一方向です。つまり、データメッセージはサーバーからクライアント (たとえばユーザーのウェブブラウザー) に向けて、一方向に配信されます。これは、メッセージの形でクライアントからサーバーにデータを送る必要がない場合には良い選択です。例えば、 EventSource はソーシャルメディアの状況アップデートやニュースフィードのようなものを扱ったり、クライアント側ストレージ (IndexedDBweb 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> 要素を生成してその中にメッセージのデータを書き込み、この要素を文書の中にある既存のリスト要素に追加します。

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

仕様書

仕様書 備考
HTML Living Standard
EventSource の定義
現行の標準

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
EventSourceChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
Available in workersChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 未対応 なしFirefox Android 完全対応 53Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?
EventSource() constructorChrome 完全対応 9Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 11Safari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 11Safari iOS 完全対応 5Samsung Internet Android ?
closeChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
error eventChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
message eventChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
onerrorChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
onmessageChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
onopenChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
open eventChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
readyStateChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
urlChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?
withCredentialsChrome 完全対応 6Edge 未対応 なしFirefox 完全対応 6IE 未対応 なしOpera 完全対応 ありSafari 完全対応 5WebView Android 完全対応 ありChrome Android 完全対応 18Edge Mobile 未対応 なしFirefox Android 完全対応 45Opera Android 完全対応 12Safari iOS 完全対応 5Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

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

このページの貢献者: mfuji09, mdnwebdocs-bot, yyss
最終更新者: mfuji09,