再接続戦略
接続が切れた後に確実に再接続します。
「再接続戦略」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
再接続する理由
ネットワークは不安定です。Wi-Fiが切断されたり、ノートパソコンがスリープしたり、サーバーが再起動したりします。堅牢なWebSocketクライアントは切断を検出し、自動的に接続を再確立して、ユーザー体験を途切れさせません。
単純な再接続
最も単純な方法は、切断時にすぐ再接続することです。ただし、サーバーが停止していると、短いループでサーバーに大量の接続を試みる危険があります。
function connect() {
const socket = new WebSocket(url);
socket.onclose = () => connect(); // too aggressive!
}固定遅延
一定の遅延を追加すると負荷は軽くなりますが、一定間隔で試行を続けるため、多数のクライアントが同時に再接続する「thundering herd」を引き起こす可能性があります。
socket.onclose = () => {
setTimeout(connect, 3000);
};指数バックオフ
試行に失敗するたびに待ち時間を2倍にします。1秒、2秒、4秒、8秒…と増やし、最大値で上限を設けます。これにより再試行を分散し、負荷の高いサーバーを助けられます。
let attempt = 0;
function reconnect() {
const delay = Math.min(1000 * 2 ** attempt, 30000);
attempt++;
setTimeout(connect, delay);
}ジッターを追加する
遅延を少しランダム化すると、数千のクライアントがまったく同じ瞬間に再接続するのを防げます。フルジッターでは、計算した上限値の0からその値までの範囲からランダムに選びます。
function backoffWithJitter(attempt) {
const cap = Math.min(1000 * 2 ** attempt, 30000);
return Math.random() * cap;
}成功時にリセットする
onopenが発生したら試行回数をリセットし、次回の切断時にバックオフを最初から開始できるようにします。
socket.onopen = () => {
attempt = 0;
console.log("reconnected");
};完全な再接続クライアント
各要素を組み合わせます。接続し、接続が開いたらリセットし、切断時にはバックオフします。
let attempt = 0, socket;
function connect() {
socket = new WebSocket(url);
socket.onopen = () => { attempt = 0; };
socket.onclose = () => {
const delay = Math.min(1000 * 2 ** attempt++, 30000);
setTimeout(connect, delay + Math.random() * 1000);
};
}
connect();オンラインとオフラインを考慮する
ブラウザーのオンライン・オフラインイベントを監視します。オフライン中は再接続を一時停止し、接続が戻ったらすぐに試行します。
window.addEventListener("online", () => {
attempt = 0;
connect();
});
window.addEventListener("offline", () => {
if (socket) socket.close();
});試行回数を制限する
必要に応じて再試行回数に上限を設け、無限に再試行する代わりに、回復不能な失敗をユーザーに知らせます。
const MAX = 10;
socket.onclose = () => {
if (attempt >= MAX) { showOfflineBanner(); return; }
setTimeout(connect, backoffWithJitter(attempt++));
};再接続後に状態を再同期する
新しい接続にはサーバー側のコンテキストがありません。再接続したら、チャンネルを再購読し、切断中に取りこぼしたメッセージをリクエストします。
socket.onopen = () => {
attempt = 0;
socket.send(JSON.stringify({ type: "resubscribe", channels }));
socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};重複ソケットを避ける
再接続ロジックが2回実行された場合に、複数のソケットを開かないようにします。現在のソケットを追跡し、古いハンドラーは無視します。
function connect() {
if (socket && socket.readyState <= WebSocket.OPEN) return;
socket = new WebSocket(url);
}クイックチェック
再接続の設計を確認しましょう。
まとめ：再接続
単純な再接続から、ジッターを伴う指数バックオフへと発展させ、成功時に試行回数をリセットし、オンライン・オフラインイベントを考慮し、再試行回数に上限を設け、再接続後に状態を再同期し、重複ソケットを避けました。これでクライアントの耐障害性が高まりました。
よくある質問
「再接続戦略」レッスンは無料ですか？
はい。「再接続戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「再接続戦略」で何を学びますか？
接続が切れた後に確実に再接続します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「再接続戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。