Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Server-sent events

EventSource インターフェイスは、サーバー送信イベントのウェブコンテンツのインターフェイスです。

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

EventTarget EventSource コネクションが開かれた後、サーバーからの着信メッセージは、イベントという形式でコードに配信されます。着信メッセージにイベントフィールドがある場合、発生するイベント は、イベントフィールドの値と同じになります。イベントフィールドが存在しない場合、一般的な message イベントが発行されます。

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

ネットワーク通信

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
EventSource
6
79
6
5
18
5
close

close() は EventSource インターフェイスのメソッドで、コネクションが構築されていればそれを閉じ、 EventSource.readyState 属性を 2 （接続終了）に設定します。
6
79
6
5
18
5
error_event

error は EventSource API のイベントで、イベントソースとのコネクションを開くのに失敗した場合に発生します。
6
79
6
5
18
5
EventSource

EventSource() コンストラクターは、リモートリソースを表す新しく作成された EventSource を返します。
6
79
6
5
18
5
EventSource (options withCredentials parameter)

`options.withCredentials` パラメータ
26
79
11
7
26
7
message_event

message は EventSource インターフェイスのイベントで、イベントソースからデータを受け取ったときに発生します。
6
79
6
5
18
5
open_event

open は EventSource インターフェイスのイベントで、イベントソースとのコネクションが開かれたときに発生します。
6
79
6
5
18
5
readyState

readyState は EventSource インターフェイスの読み取り専用プロパティで、コネクションの状態を表す数値を返します。
6
79
6
5
18
5
url

url は EventSource インターフェイスの読み取り専用プロパティで、ソースの URL を表す文字列を返します。
18
79
6
6
18
6
withCredentials

withCredentials は EventSource インターフェイスの読み取り専用プロパティで、この EventSource オブジェクトが CORS 資格情報が設定してインスタンス化されたかどうかを示す論理値を返します。
26
79
6
7
26
7
worker_support

労働者で利用可能
6
79
133
5
18
5
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (133)
実装メモ
  • サービスワーカーではサポートされていません。

基本構文

JAVASCRIPT 
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

実務での使いどころ

  • Server-sent events の活用

    EventSource インターフェイスは、サーバー送信イベントのウェブコンテンツのインターフェイスです。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク