【さーばーせんといべんつ】

Server-Sent Events とは?

最終更新:
💡 サーバーから「一方通行」でリアルタイムにデータを送る

HTTPの接続を通じて、サーバーからクライアントへテキスト形式のイベントを送り続けるWeb標準技術。ブラウザではEventSource APIで受信できる。

📌 このページのポイント
SSE:サーバーからイベントを配信 ブラウザ サーバー HTTPで接続要求 data: 更新1 + 空行 data: 更新2 + 空行 レスポンスを保ち、イベントを逐次配信 形式は text/event-stream(UTF-8)
青い矢印は接続要求、緑の矢印はサーバーからのイベント配信です。空行でイベントを区切ります。
ひよこ ひよこ
WebSocketと何が違うの?
ペンギン先生 ペンギン先生
WebSocketは双方向でメッセージをやり取りできるよ。SSEはサーバーからの配信が中心で、クライアントはHTTPで接続を要求するんだ。通知や逐次更新に使いやすく、逆方向に送るときは別のHTTPリクエストなどを使うよ。
ひよこ ひよこ
どうやって使うの?
ペンギン先生 ペンギン先生
ブラウザではnew EventSource('/api/events')で接続し、onmessageで受け取れるよ。サーバーはContent-Type: text/event-streamのレスポンスで、data: メッセージの行と空行を送る。空行がイベントの区切りなんだ。
ひよこ ひよこ
送る内容はJSONでもいいの?
ペンギン先生 ペンギン先生
いいよ。dataの値にJSONの文字列を入れ、受信側でJSON.parseして扱えるんだ。同じイベントに複数のdata行があると、改行でつながるよ。イベントごとに空行で区切る必要があるね。
ひよこ ひよこ
制限はある?
ペンギン先生 ペンギン先生
データはUTF-8のテキスト形式だよ。EventSourceは接続が途切れると再接続を試みるけど、close()やサーバーのHTTP 204応答で止められる。接続数や中継サーバーのバッファリングにも注意が必要だね。
もっと詳しく知りたい人へ

再接続すれば、途切れた間のイベントも全部届く?

自動的に全部届く保証はありません。サーバーがidを付けて送ると、EventSourceは再接続時にLast-Event-IDを伝えられます。そのIDに応じて未受信分を再送する処理は、サーバー側で設計する必要があります。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「Server-Sent Events」って出てきたら「HTTPでサーバーからイベントを送り続ける仕組み」と思えばだいたいOK!
📖 おまけ:英語の意味
「Server-Sent Events」 = サーバー送信イベント
💬 Server-Sentは「サーバーから送られた」、Eventsは「イベント」という意味で、HTMLの標準仕様に含まれるよ。

参考資料

← 用語集にもどる