SSEとは？WebSocketより手軽なサーバー→ブラウザの一方向配信
Server-Sent Events。text/event-stream と自動再接続
SSEはHTTPベースの単方向ストリーミング技術です。サーバーはクライアントにイベントを送信し続けることができますが、クライアント→サーバー方向は別途HTTPリクエストが必要です。WebSocketよりシンプルでHTTP/2との互換性が高く、自動再接続機能がブラウザに内蔵されています。
構造ダイアグラム
🌐
Client
EventSource API
① GETリクエスト
→
HTTP接続維持
←
② text/event-stream
←
data: {...}
←
data: {...}
単方向ストリーム（サーバー → クライアント）
🖥️
Server
Content-Type: text/event-stream
接続切断時にブラウザが 自動再接続 (Last-Event-ID 送信)
フロー説明
- クライアントがEventSource APIでサーバーにHTTP GETリクエスト
- サーバーがtext/event-streamで応答、接続維持
- サーバーがイベントを
data:形式でストリーミング - 接続切断時にブラウザが自動再接続
動作フロー
1
クライアントがEventSource APIでサーバーにHTTP GETリクエスト
2
サーバーがContent-Type: text/event-streamで応答、接続維持
3
サーバーがイベント発生時にdata:形式でストリーミング送信
4
切断時にブラウザが自動再接続（Last-Event-IDを活用）
メリット
- ✓ HTTPベースで実装がシンプル
- ✓ 自動再接続が内蔵
- ✓ HTTP/2マルチプレキシングを活用
- ✓ テキストベースでデバッグが容易
デメリット
- ✗ 単方向のみ（サーバー→クライアント）
- ✗ バイナリデータ転送が非効率
- ✗ IE/旧ブラウザ非対応
- ✗ 最大同時接続数制限（HTTP/1.1で6個）
ユースケース
リアルタイム通知/フィード
AIチャットボットのストリーミング応答（ChatGPT）
株価更新
ビルド/デプロイログストリーミング
ライブスコアボード