EventSourceを使ったReactでのSSEストリーム利用

new EventSource(url) は、指定した URL への SSE 接続を作成します。ブラウザーはすぐに Accept: text/event-stream ヘッダーを付けた HTTP GET リクエストを開始します。サーバーはこの接続を開いたままにし、イベントをストリーミングします。EventSource はブラウザー標準の API なので、基本的な利用にライブラリは必要ありません。

EventSource には 3 つの ready state があります。0 (CONNECTING) — 接続を確立中、または再確立中。1 (OPEN) — 接続が確立され、イベントが流れている。2 (CLOSED) — 接続が閉じられ、再接続されない。現在の状態を確認するには eventSource.readyState を参照します。

eventSource.onmessage ハンドラーは、明示的なイベント種別を持たないサーバーイベントに対して実行されます（サーバーが event: フィールドなしで data: ... を送信する場合です）。ハンドラーはイベントオブジェクトを受け取り、event.data に文字列のペイロードが格納されます。サーバーは通常、データを JSON.stringify して送信するため、受信時に JSON.parse します。

サーバーは名前付きイベントを送信できます。event: userJoined data: {"userId": "123"} のように送信します。ブラウザーでは、eventSource.addEventListener('userJoined', handler) でリッスンします。これにより、1 つの SSE 接続上で複数のイベント種別を多重化できます。イベント種別ごとにハンドラーを用意できるため、コードを整理してわかりやすく保てます。

SSE のデータは文字列として届きます。構造化データの場合、サーバーは JSON.stringify(payload) を送信し、クライアントは const data = JSON.parse(event.data) で解析します。サーバーから不正な JSON が届いた場合にも適切に処理できるよう、JSON.parse は必ず try/catch で囲み、エラーをログに記録して不正なイベントをスキップしてください。

EventSource は useEffect の内部で作成と終了を行います。コンポーネントのマウント時に接続を作成し、イベントハンドラーを登録して、eventSource.close() を呼び出すクリーンアップ関数を返します。クリーンアップを行わないと、コンポーネントのアンマウント時、ユーザーが別の画面に移動したとき、または異なる依存関係でエフェクトが再実行されたときに接続がリークします。

eventSource.onmessage ハンドラー内で React の state を更新し、新しいデータを反映します。setMessages(prev => [...prev, JSON.parse(event.data)]) のように記述します。古いクロージャの問題を避けるため、setState の関数形式を使用してください。イベントハンドラーは初期 state の値をキャプチャしますが、関数形式の更新を使うことで常に最新の state に対して更新できます。

EventSource は、ネットワークエラーやサーバーの再起動によって接続が失われると、自動的に再接続します。ブラウザーは短い遅延（通常は3秒。ストリーム内の retry: 3000 によってサーバー側で設定できます）の後に再接続します。再接続ロジックを実装する必要はありません。EventSource API に組み込まれています。

EventSource は、最後に受信したイベント ID（サーバーがストリーム内の id: 123 を使用して設定したもの）を追跡します。再接続時、ブラウザーはこの ID を Last-Event-ID HTTP ヘッダーで自動的に送信します。適切に設計されたサーバーはこの ID を使って未受信のイベントを再送し、再接続中にイベントが失われないようにします。

EventSource はカスタムヘッダーを直接サポートしていません。認証には Cookie を使用します（new EventSource(url, { withCredentials: true }) を使うと Cookie が送信されます）。または、認証トークンを URL のクエリパラメーターに含めます。Authorization ヘッダーが必要な場合は、EventSource の代わりに Fetch API と ReadableStream を使用し、SSE の応答を手動で処理してください。

EventSource でエラーが発生すると、onerror ハンドラーが呼び出されます。readyState は、再試行する場合は CONNECTING、再試行しない場合は CLOSED になります。onerror では readyState を確認して、一時的なネットワークエラー（自動的に再試行されます）と恒久的な失敗（サーバーが 200 以外のステータスを返しました）を区別してください。恒久的なエラーの場合は接続を閉じ、ユーザーに通知します。

ネットワークエラーによって EventSource 接続が切断されると、どうなりますか？

new EventSource(url) は、readyStates が CONNECTING、OPEN、CLOSED のいずれかになる SSE 接続を作成します。onmessage は一般的なイベントを処理し、addEventListener は名前付きのイベントタイプを処理します。JSON.parse(event.data) で構造化されたペイロードを取り出します。useEffect 内で EventSource を作成し、クリーンアップしてください。自動再接続は組み込まれており、ネットワークエラーの後に EventSource が Last-Event-ID を使って再試行し、未受信イベントを再送します。認証には Cookie（withCredentials）または URL のクエリパラメーターを使用します。