0Pricing
WebSockets & Realtime Systems Programming · Leçon

Reconnexion automatique côté client

Créez un client WebSocket de navigateur robuste qui détecte les ruptures et se reconnecte automatiquement avec un délai croissant de manière exponentielle et une mise en file des messages.

Reconnexion automatique côté client est une leçon WebSockets & Realtime Systems Programming gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebSockets & Realtime Systems Programming, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebSockets & Realtime Systems Programming comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Connections Drop

Networks are unreliable. Wi-Fi hiccups, tabs sleep, and servers restart. A good client detects a closed socket and reconnects without the user noticing.

Detecting a Drop

The browser fires close when the connection ends and error on failures. Reconnection logic hooks into close.

ws.addEventListener('close', () => {
  scheduleReconnect();
});

Naive Reconnect Is Risky

Reconnecting instantly in a tight loop can hammer a struggling server. Instead, wait longer after each failed attempt.

Exponential Backoff

Double the delay each attempt, up to a cap, so a recovering server is not overwhelmed.

let attempt = 0;
function delay() {
  return Math.min(1000 * 2 ** attempt, 30000);
}

Adding Jitter

If many clients reconnect at once, they create a thundering herd. Random jitter spreads them out.

function delayWithJitter() {
  return delay() * (0.5 + Math.random() * 0.5);
}

The Reconnect Function

Wrap connection creation so each attempt re-binds handlers and schedules the next retry on failure.

function connect() {
  ws = new WebSocket(url);
  ws.addEventListener('open', onOpen);
  ws.addEventListener('close', scheduleReconnect);
}

Resetting on Success

When a connection opens successfully, reset the attempt counter so future drops start backoff fresh.

function onOpen() {
  attempt = 0;
  flushQueue();
}

Queuing Messages While Down

If the user sends while disconnected, buffer the message and send it once reconnected.

const queue = [];
function send(data) {
  if (ws.readyState === WebSocket.OPEN) ws.send(data);
  else queue.push(data);
}

Flushing the Queue

On reconnect, drain the buffer in order.

function flushQueue() {
  while (queue.length) ws.send(queue.shift());
}

Giving Up Gracefully

After a max number of attempts, surface an error to the user rather than retrying forever.

function scheduleReconnect() {
  if (++attempt > 10) return showOffline();
  setTimeout(connect, delayWithJitter());
}

Best Practices

Build resilient clients:

  • Use exponential backoff with jitter
  • Reset state on a successful open
  • Queue outgoing messages while offline
  • Cap retries and inform the user

Quick Check

Test your reconnection knowledge.

Recap

You built an auto-reconnecting client:

  • Hook the close event to schedule retries
  • Use exponential backoff with jitter
  • Reset attempts on open
  • Queue and flush messages around outages

Your client now survives flaky networks.

Questions Fréquemment Posées

La leçon « Reconnexion automatique côté client » est-elle gratuite ?

Oui — le texte complet de « Reconnexion automatique côté client » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebSockets & Realtime Systems Programming, passe à CoddyKit PRO. Le cours WebSockets & Realtime Systems Programming comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Reconnexion automatique côté client » ?

Créez un client WebSocket de navigateur robuste qui détecte les ruptures et se reconnecte automatiquement avec un délai croissant de manière exponentielle et une mise en file des messages. Tu pratiques WebSockets & Realtime Systems Programming avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer WebSockets & Realtime Systems Programming ?

Aucune expérience préalable n'est requise. WebSockets & Realtime Systems Programming sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Reconnexion automatique côté client » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon WebSockets & Realtime Systems Programming ?

Oui. Chaque leçon WebSockets & Realtime Systems Programming inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Fondamentaux de l’API WebSocket du navigateur
  2. Envoyer et recevoir des données
  3. Gestion des événements côté client
  4. Reconnexion automatique côté client
← Retour à WebSockets & Realtime Systems Programming