Server-Sent Events (SSE)

8 min read intermediate
Server-Sent Events (SSE)

Server-Sent Eventsとは?

Server-Sent Events (SSE)は、サーバーがHTTP経由でクライアントにリアルタイム更新をプッシュできるようにするWebテクノロジーです。WebSocketsとは異なり、SSEは単方向で、データはサーバーからクライアントへのみ流れます。

動作の仕組み

クライアントはEventSource APIを使用して永続的な接続を確立します:

javascript
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
  console.log(event.data);
};

サーバーは接続を開いたままにし、このフォーマットでイベントを送信します:

data: {"message": "更新"}

主な特徴

  • 自動再接続
  • イベントタイプのサポート
  • ブラウザネイティブサポート
  • HTTP/HTTPS上で動作
  • WebSocketsよりシンプル
  • エラー処理が組み込み

ユースケース

  • ライブフィード更新
  • ステータス更新
  • リアルタイム通知
  • 進行状況インジケータ
  • 株価ティッカー

ブラウザサポート

SSEは全ての最新ブラウザでサポートされており、古いブラウザ用のポリフィルも利用可能です。

制限事項

  • 同時接続の最大数
  • 一方向通信のみ
  • プロキシの潜在的な問題

ベストプラクティス

  • リトライメカニズムの組み込み
  • 接続エラーの処理
  • 接続状態の監視
  • ページアンロード時のクリーンアップ