📨

SSE（Server-Sent Events）

サーバー→クライアント単方向ストリーム

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 送信)
フロー説明
  1. クライアントがEventSource APIでサーバーにHTTP GETリクエスト
  2. サーバーがtext/event-streamで応答、接続維持
  3. サーバーがイベントを data: 形式でストリーミング
  4. 接続切断時にブラウザが自動再接続

動作フロー

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） 株価更新 ビルド/デプロイログストリーミング ライブスコアボード
← 🔌 WebSocket 💎 GraphQL Subscription →