ロングポーリングのパターンと再接続ロジック

ロングポーリングは、クライアントが HTTP リクエストを送信し、サーバーが新しいデータを利用できるようになるまで（または通常30〜60秒のタイムアウトになるまで）接続を開いたままにし、サーバーがデータを応答として返し、クライアントがすぐに別のリクエストを送信するというサイクルで動作します。これにより、サーバープッシュに近い性質を持つ、ほぼ継続的な接続が実現します。

React でロングポーリングを行うには、useEffect 内で非同期の再帰関数を使用します。この関数は fetch リクエストを実行し、応答を処理した後、自分自身をもう一度呼び出します。AbortController のシグナルによって、コンポーネントのアンマウント時に再帰を停止します。コンポーネントがマウントされていて、abort が通知されていない限り、関数はループします。

useEffect の先頭で AbortController を作成し、すべての fetch 呼び出しに controller.signal を渡します。クリーンアップ関数では controller.abort() を呼び出します。これにより、コンポーネントのアンマウント時に実行中のリクエストがキャンセルされ、アンマウント済みのコンポーネントへの状態更新やネットワークリソースのリークを防げます。

ロングポーリングのリクエストが失敗したときは、すぐに再試行せず、次の試行まで待機してください。指数バックオフでは、連続して失敗するたびに遅延時間を2倍にします（1秒、2秒、4秒、8秒、16秒）。ただし、最大30秒までとします。これにより、失敗しているサーバーへの過剰なリクエストを防ぎ、一時的な問題が解消する時間を確保できます。応答が成功したら、遅延時間を1秒に戻します。

多くのクライアントが同じサーバーをポーリングする場合、ジッターなしの指数バックオフでは「thundering herd（サンダリングハード）」が発生します。すべてのクライアントが同じ時間だけ待機して同時に再試行するため、サーバーに再び過大な負荷がかかります。遅延時間を delay + Math.random() * delay のようにランダム化してジッターを追加してください。これにより、再試行が時間帯全体に分散され、サーバー負荷の急増を抑えられます。

接続状態のステートを管理し、ポーリングのライフサイクルを反映します。isConnecting は初回接続中またはエラー後の再接続中、isConnected は直前のポーリングが成功した状態、isError は連続失敗が発生して最大再試行回数に達した状態を表します。ユーザーがリアルタイムデータの信頼性を理解できるよう、この状態を UI に表示してください。

次の再試行までのバックオフ待機中に、進捗インジケーター付きで「8秒後に再接続します…」のようなカウントダウンを表示できます。バックオフタイマーを設定するときに再試行のタイムスタンプを計算し、毎秒表示を更新します。このように状況を見える化すると、アプリが積極的に復旧を試みていることが伝わり、ユーザーを安心させられます。

ポーリングには setInterval ではなく、再帰的な setTimeout（応答ハンドラー内で次のポーリングを呼び出す方法）を使用してください。setInterval は前のリクエストにかかった時間に関係なく一定間隔で実行されるため、時間のかかるリクエストによってポーリングが重複することがあります。再帰的な setTimeout では、前のポーリングが完了してから次のポーリングを開始します。

フックの設定オプションとしてポーリング間隔を公開してください。useLongPoll({ url, interval: 5000 }) のように指定します。データソースによって必要な更新頻度は異なります。たとえば「オンラインユーザー」の表示は30秒ごと、タスクのステータスは5秒ごとにポーリングする場合があります。実装コードに間隔をハードコードするのは避けてください。

API が成熟したら、効率を高めるためにポーリングを SSE に置き換えることがあります。ポーリングフックを使用する React コンポーネントは、トランスポート層から切り離しておくべきです。フックが同じインターフェース（onData、status、error）を公開していれば、内部の実装をポーリングから EventSource に切り替えても、そのフックを利用するコンポーネントを変更する必要はありません。

サーバーがロングポーリングの接続を保持している間にデータが届かない場合、接続が無期限に開いたままになるのを防ぐため、タイムアウトとして応答する必要があります（空の本文を持つ 200、または 204 No Content）。その後、クライアントはすぐに再度ポーリングします。このサーバー側のタイムアウト（30〜60秒）は、クライアント側の fetch タイムアウト（より長い時間、たとえば90秒）とは別のものです。

接続エラーの後に再試行するとき、ロングポーリングで指数バックオフを使用するのはなぜですか？

ロングポーリングでは、クライアントがリクエストを送信し、サーバーがデータを利用できるようになるかタイムアウトするまで保持し、応答後すぐにクライアントが再度リクエストします。useEffect 内で再帰的な非同期 fetch を使用し、AbortController でクリーンアップします。エラー時は、サンダリングハードを防ぐために指数バックオフ（1秒、2秒、4秒…、最大30秒）とジッターを組み合わせます。ポーリングの重複を防ぐため、setInterval ではなく再帰的な setTimeout を使用します。UI へのフィードバック用に、isConnecting、isConnected、isError の状態を追跡します。