Strategie di riconnessione
Si riconnetta in modo affidabile dopo le interruzioni.
Strategie di riconnessione è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Perché riconnettersi?
Le reti non sono affidabili: il Wi-Fi si interrompe, i portatili entrano in sospensione e i server vengono riavviati. Un client WebSocket robusto rileva la chiusura e ristabilisce automaticamente la connessione, mantenendo fluida l'esperienza dell'utente.
Riconnessione ingenua
L'approccio più semplice riapre immediatamente la connessione alla chiusura. Il rischio è che, se il server è inattivo, venga sommerso da richieste in un loop molto ravvicinato.
function connect() {
const socket = new WebSocket(url);
socket.onclose = () => connect(); // too aggressive!
}Ritardo fisso
Aggiungere un ritardo costante è più delicato, ma continua comunque a inviare tentativi a intervalli regolari e può sincronizzare molti client, creando un effetto valanga.
socket.onclose = () => {
setTimeout(connect, 3000);
};Exponential backoff
Raddoppi l'attesa dopo ogni tentativo fallito: 1 s, 2 s, 4 s, 8 s… fino a un limite massimo. In questo modo distribuisce i nuovi tentativi nel tempo e riduce il carico su un server in difficoltà.
let attempt = 0;
function reconnect() {
const delay = Math.min(1000 * 2 ** attempt, 30000);
attempt++;
setTimeout(connect, delay);
}Aggiungere jitter
Renda il ritardo leggermente casuale, così migliaia di client non si riconnettono nello stesso istante. Il full jitter sceglie un valore casuale tra 0 e il limite calcolato.
function backoffWithJitter(attempt) {
const cap = Math.min(1000 * 2 ** attempt, 30000);
return Math.random() * cap;
}Reimpostare dopo il successo
Quando viene generato onopen, reimposti il contatore dei tentativi, così la disconnessione successiva ricomincia il backoff da zero.
socket.onopen = () => {
attempt = 0;
console.log("reconnected");
};Un client completo con riconnessione
Metta insieme i vari elementi: si connetta, reimposti il contatore all'apertura e applichi il backoff alla chiusura.
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();Gestire lo stato online/offline
Ascolti gli eventi online/offline del browser. Metta in pausa la riconnessione quando è offline e avvii immediatamente un tentativo quando la connettività torna disponibile.
window.addEventListener("online", () => {
attempt = 0;
connect();
});
window.addEventListener("offline", () => {
if (socket) socket.close();
});Limitare i tentativi
Facoltativamente, imposti un numero massimo di nuovi tentativi e comunichi all'utente un errore definitivo invece di continuare a riprovare senza fine.
const MAX = 10;
socket.onclose = () => {
if (attempt >= MAX) { showOfflineBanner(); return; }
setTimeout(connect, backoffWithJitter(attempt++));
};Sincronizzare nuovamente lo stato dopo la riconnessione
Una nuova connessione non dispone del contesto lato server. Alla riapertura, si iscriva nuovamente ai canali e richieda i messaggi eventualmente persi durante la disconnessione.
socket.onopen = () => {
attempt = 0;
socket.send(JSON.stringify({ type: "resubscribe", channels }));
socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};Evitare socket duplicati
Impedisca l'apertura di più socket se la logica di riconnessione viene attivata due volte. Tenga traccia del socket corrente e ignori i gestori obsoleti.
function connect() {
if (socket && socket.readyState <= WebSocket.OPEN) return;
socket = new WebSocket(url);
}Verifica rapida
Verifichi la progettazione della riconnessione.
Riepilogo: riconnessione
È passato dalla riconnessione ingenua al backoff esponenziale con jitter, ha reimpostato i tentativi dopo un successo, rispettato gli eventi online/offline, limitato i nuovi tentativi, sincronizzato nuovamente lo stato dopo la riconnessione ed evitato socket duplicati. Ora il Suo client è resiliente.
Domande Frequenti
La lezione «Strategie di riconnessione» è gratuita?
Sì — il testo completo di «Strategie di riconnessione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «Strategie di riconnessione»?
Si riconnetta in modo affidabile dopo le interruzioni. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Strategie di riconnessione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Aprire una connessione WebSocket
- Inviare e ricevere messaggi
- Ciclo di vita ed errori della connessione
- Strategie di riconnessione