0Pricing
React Academy · Leçon

Reconnexion, gestion des erreurs et nettoyage

Gérez élégamment les déconnexions et nettoyez les écouteurs de socket dans useEffect.

Reconnexion, gestion des erreurs et nettoyage est une leçon React Academy 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pourquoi la reconnexion est importante

Les interruptions réseau sont fréquentes sur mobile. Sans logique de reconnexion, les utilisateurs perdent silencieusement leur connexion en temps réel. Une bonne stratégie effectue automatiquement de nouvelles tentatives avec une temporisation progressive.

Reconnexion automatique de Socket.IO

Socket.IO se reconnecte automatiquement par défaut. Configurez reconnectionAttempts, reconnectionDelay et reconnectionDelayMax dans les options de io().

const socket = io('https://api.example.com', {
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,       // initial delay
  reconnectionDelayMax: 10000,   // max delay (exponential backoff)
  randomizationFactor: 0.5,
});

Suivre l’état de la connexion dans React

Écoutez les événements connect, disconnect et connect_error et reflétez l’état dans l’état du composant.

function useConnectionStatus() {
  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>(
    socket.connected ? 'connected' : 'disconnected'
  );

  useEffect(() => {
    socket.on('connect', () => setStatus('connected'));
    socket.on('disconnect', () => setStatus('disconnected'));
    socket.on('connect_error', () => setStatus('error'));
    return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('connect_error');
    };
  }, []);

  return status;
}

Afficher une bannière de reconnexion

Affichez une bannière lorsque le socket se déconnecte afin que les utilisateurs sachent qu’ils sont hors ligne et qu’une reconnexion est en cours.

function ConnectionBanner() {
  const status = useConnectionStatus();
  if (status === 'connected') return null;
  return (
    <div className="banner warning">
      {status === 'error' ? 'Connection failed' : 'Reconnecting...'}
    </div>
  );
}

Reconnexion manuelle

Après avoir épuisé les tentatives, permettez aux utilisateurs de déclencher une reconnexion manuelle au moyen d’un bouton.

const [failed, setFailed] = useState(false);

socket.on('reconnect_failed', () => setFailed(true));

if (failed) {
  return (
    <button onClick={() => { setFailed(false); socket.connect(); }}>
      Retry connection
    </button>
  );
}

Reconnexion d’un WebSocket brut

WebSocket brut n’offre aucune reconnexion intégrée. Implémentez manuellement une temporisation exponentielle : à la fermeture, attendez Math.min(delay * 2, maxDelay) avant de tenter une nouvelle connexion.

function connectWithBackoff(url, attempt = 0) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt, 30000);
    setTimeout(() => connectWithBackoff(url, attempt + 1), delay);
  };
  return ws;
}

Nettoyage dans useEffect

Chaque écouteur de socket ajouté dans un useEffect doit être supprimé dans la fonction de nettoyage. Oublier de le faire entraîne des fuites de mémoire et une gestion des événements en double.

useEffect(() => {
  const onData = (d) => setState(d);
  socket.on('data', onData);

  return () => {
    socket.off('data', onData); // remove specific handler reference
  };
}, []);

Éviter les fermetures obsolètes dans les gestionnaires

Lorsqu’un gestionnaire de socket fait référence à l’état ou aux propriétés, il capture une fermeture obsolète. Utilisez une référence pour toujours accéder à la valeur la plus récente.

const handlerRef = useRef(null);
handlerRef.current = (msg) => updateMessages(messages, msg); // fresh ref each render

useEffect(() => {
  const onMsg = (...args) => handlerRef.current(...args);
  socket.on('message', onMsg);
  return () => socket.off('message', onMsg);
}, []); // no deps needed

Vider les messages en attente après la reconnexion

Mettez les messages sortants en file d’attente lorsque vous êtes déconnecté, puis videz la file lorsque la connexion est rétablie.

const queue = useRef<string[]>([]);

socket.on('connect', () => {
  while (queue.current.length) {
    socket.emit('message', queue.current.shift());
  }
});

function send(text: string) {
  if (socket.connected) socket.emit('message', text);
  else queue.current.push(text);
}

Rejoindre les salons après la reconnexion

Socket.IO efface les appartenances aux salons lors d’une déconnexion. Rejoignez les salons lorsque le socket se reconnecte afin de rétablir les abonnements.

useEffect(() => {
  function rejoin() { socket.emit('join-room', roomId); }
  socket.on('connect', rejoin);
  return () => socket.off('connect', rejoin);
}, [roomId]);

Gestion globale des erreurs

Gérez correctement les erreurs irrécupérables : affichez une interface d’erreur et proposez de recharger la page en dernier recours.

socket.on('connect_error', (err) => {
  console.error('Socket error:', err.message);
  // Show user-friendly error
});

Vérification rapide

Quel est le risque de ne pas supprimer un écouteur d’événements du socket lors du nettoyage de useEffect ?

Récapitulatif

Configurez la reconnexion de Socket.IO avec des options de temporisation progressive. Reflétez l’état de la connexion dans l’état React, affichez une bannière de reconnexion, rejoignez les salons après la reconnexion et supprimez toujours les écouteurs lors du nettoyage de useEffect. Mettez les messages en attente en file lorsque vous êtes hors ligne et videz-la lors de la reconnexion.

Questions Fréquemment Posées

La leçon « Reconnexion, gestion des erreurs et nettoyage » est-elle gratuite ?

Oui — le texte complet de « Reconnexion, gestion des erreurs et nettoyage » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Reconnexion, gestion des erreurs et nettoyage » ?

Gérez élégamment les déconnexions et nettoyez les écouteurs de socket dans useEffect. Tu pratiques React Academy 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 React Academy ?

Aucune expérience préalable n'est requise. React Academy 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, gestion des erreurs et nettoyage » ?

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 React Academy ?

Oui. Chaque leçon React Academy 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 WebSocket dans le navigateur
  2. Utiliser Socket.IO avec React
  3. Créer un composant de discussion en temps réel
  4. Reconnexion, gestion des erreurs et nettoyage
← Retour à React Academy