JavaScript Academy · Leçon

Cycle de vie et erreurs de connexion

Gérez les événements d’ouverture, de fermeture et d’erreur.

Cycle de vie et erreurs de connexion est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Le cycle de vie complet

Une socket passe par les états CONNECTING → OPEN → CLOSING → CLOSED. Quatre événements correspondent à ces transitions : open, message, error et close.

L’événement de fermeture

onclose se déclenche lorsque la connexion se termine, normalement ou non. L’événement contient code, reason et wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Codes de fermeture

Les codes standard comprennent 1000 (normal), 1001 (départ de l’autre partie), 1006 (anormal, sans trame de fermeture) et 1011 (erreur du serveur). Les codes 4000 à 4999 sont définis par l’application.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Fermer volontairement

socket.close(code, reason) lance un arrêt progressif. Utilisez 1000 pour une fermeture normale ; la chaîne indiquant la raison doit contenir moins de 123 bytes.

socket.close(1000, "user logged out");

L’événement d’erreur

onerror se déclenche en cas d’échec. Pour des raisons de sécurité, l’événement d’erreur est volontairement peu détaillé : il ne contient aucune raison précise. Un événement close suit presque toujours.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Distinguer une fermeture propre d’une fermeture anormale

event.wasClean vaut true uniquement lorsque les deux parties ont échangé des trames de fermeture. Une coupure réseau donne wasClean: false et le code 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Nettoyer les ressources

Lors de la fermeture, effacez les minuteurs (signaux de maintien), rejetez les requêtes pending et mettez à jour l’état de l’interface afin que l’application reflète la déconnexion.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Supprimer les écouteurs

Si vous avez associé des gestionnaires avec addEventListener, supprimez-les à la fermeture pour éviter les fuites, en particulier lorsque vous recréez des sockets.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

readyState pendant l’arrêt

Entre l’appel à close() et l’événement onclose, readyState vaut CLOSING (2). Les envois effectués pendant cette période sont ignorés.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Délais d’inactivité imposés par les serveurs

Les serveurs et les proxys ferment souvent les connexions inactives après 30 à 60 secondes. Les signaux de maintien gardent la connexion active et permettent de détecter rapidement les coupures.

Détecter une connexion interrompue

Combinez les signaux de maintien avec un mécanisme de surveillance : si aucun pong n’arrive pendant une certaine durée, considérez la socket comme inactive et fermez-la pour déclencher une reconnexion.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

Vérification rapide

Vérifiez la gestion du cycle de vie.

Récapitulatif : cycle de vie et erreurs

Vous avez géré onclose avec son code/reason/wasClean, appris les codes de fermeture standard, fermé volontairement une connexion, traité l’événement onerror peu détaillé, nettoyé les minuteurs et les écouteurs, puis créé un mécanisme de surveillance avec signal de maintien. Ensuite : les stratégies de reconnexion.

Questions Fréquemment Posées

La leçon « Cycle de vie et erreurs de connexion » est-elle gratuite ?

Oui — le texte complet de « Cycle de vie et erreurs de connexion » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Cycle de vie et erreurs de connexion » ?

Gérez les événements d’ouverture, de fermeture et d’erreur. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 3 sur 4.

Combien de temps prend la leçon « Cycle de vie et erreurs de connexion » ?

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

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy