WebSockets HTML5

Avec la Fetch API, c'est toujours le navigateur qui prend l'initiative : il envoie une requête, le serveur répond, la connexion se ferme. Ce modèle fonctionne bien pour charger des données, mais il devient inefficace dès que vous avez besoin de mises à jour en continu — un chat, un tableau de bord live, un jeu multijoueur.

Les WebSockets inversent ce paradigme. Une seule poignée de main HTTP établit la connexion, puis le protocole bascule sur ws:// (ou wss:// en sécurisé). À partir de là, serveur et navigateur peuvent s'envoyer des messages dans les deux sens, sans délai, sans en-têtes HTTP répétés à chaque échange.

Ouvrir une connexion WebSocket

Côté navigateur, tout commence par la création d'un objet WebSocket. Quatre événements couvrent l'ensemble du cycle de vie de la connexion :

Exemple :   📋 Copier le code

// Ouvrir une connexion WebSocket sécurisée
const ws = new WebSocket('wss://monserveur.fr/chat');

// Connexion établie
ws.onopen = () => {
  console.log('Connecté au serveur.');
};

// Message reçu du serveur
ws.onmessage = (event) => {
  console.log('Message reçu :', event.data);
};

// Connexion fermée
ws.onclose = (event) => {
  console.log('Déconnecté. Code :', event.code);
};

// Erreur réseau
ws.onerror = (erreur) => {
  console.error('Erreur WebSocket :', erreur);
};

Envoyer des messages

Une fois la connexion ouverte, send() transmet un message au serveur. On peut envoyer du texte brut ou du JSON sérialisé :

Exemple :   📋 Copier le code

// Envoyer un message texte simple
ws.send('Bonjour serveur !');

// Envoyer un objet JSON sérialisé
const message = {
  type: 'chat',
  auteur: 'Alice',
  contenu: 'Salut tout le monde !'
};
ws.send(JSON.stringify(message));

// Toujours vérifier que la connexion est ouverte avant d'envoyer
if (ws.readyState === WebSocket.OPEN) {
  ws.send('Message sécurisé');
}

Recevoir et traiter des messages JSON

Le serveur envoie souvent des objets JSON. Il faut les désérialiser dans onmessage pour accéder aux propriétés :

Exemple :   📋 Copier le code

ws.onmessage = (event) => {
  try {
    const donnees = JSON.parse(event.data);

    // Traiter selon le type de message
    switch (donnees.type) {
      case 'chat':
        afficherMessage(donnees.auteur, donnees.contenu);
        break;
      case 'utilisateurs':
        mettreAJourListe(donnees.liste);
        break;
      case 'notification':
        afficherNotification(donnees.texte);
        break;
    }
  } catch (e) {
    // Message texte non-JSON
    console.log('Message brut :', event.data);
  }
};

Exemple pratique : chat en temps réel

Voici une implémentation complète d'un chat côté navigateur — connexion, envoi de messages et affichage des réponses :

Exemple :   📋 Copier le code

const ws = new WebSocket('wss://monserveur.fr/chat');
const messages = document.getElementById('messages');
const saisie = document.getElementById('saisie');

ws.onopen = () => {
  afficherSysteme('Connecté au chat.');
};

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  const li = document.createElement('li');
  li.textContent = `${msg.auteur} : ${msg.contenu}`;
  messages.appendChild(li);
};

ws.onclose = () => {
  afficherSysteme('Déconnecté du chat.');
};

// Envoyer le message saisi
function envoyer() {
  const texte = saisie.value.trim();
  if (!texte || ws.readyState !== WebSocket.OPEN) return;

  ws.send(JSON.stringify({ auteur: 'Moi', contenu: texte }));
  saisie.value = '';
}

function afficherSysteme(texte) {
  const li = document.createElement('li');
  li.textContent = `[Système] ${texte}`;
  messages.appendChild(li);
}

Fermer la connexion proprement

Il est important de fermer la connexion WebSocket quand elle n'est plus nécessaire — par exemple quand l'utilisateur quitte la page — pour libérer les ressources côté serveur :

Exemple :   📋 Copier le code

// Fermer proprement la connexion avec un code et une raison
ws.close(1000, 'Déconnexion volontaire');

// Fermer automatiquement quand l'utilisateur quitte la page
window.addEventListener('beforeunload', () => {
  ws.close();
});

Reconnexion automatique

Les connexions WebSocket peuvent se couper (réseau instable, redémarrage serveur). Une stratégie de reconnexion automatique avec délai progressif évite de saturer le serveur :

Exemple :   📋 Copier le code

let ws;
let tentatives = 0;

function connecter() {
  ws = new WebSocket('wss://monserveur.fr/chat');

  ws.onopen = () => {
    console.log('Connecté.');
    tentatives = 0; // réinitialiser le compteur
  };

  ws.onclose = () => {
    tentatives++;
    // Délai progressif : 1s, 2s, 4s, 8s... jusqu'à 30s max
    const delai = Math.min(1000 * 2 ** tentatives, 30000);
    console.log(`Reconnexion dans ${delai / 1000}s...`);
    setTimeout(connecter, delai);
  };
}

connecter();

Les états de la connexion : readyState

La propriété readyState indique l'état actuel de la connexion. Elle prend quatre valeurs possibles :

• WebSocket.CONNECTING (0) : connexion en cours d'établissement.
• WebSocket.OPEN (1) : connexion ouverte, envoi et réception possibles.
• WebSocket.CLOSING (2) : fermeture en cours.
• WebSocket.CLOSED (3) : connexion fermée.

WebSockets vs Fetch vs Server-Sent Events

Le bon outil dépend du sens de la communication :

• Fetch API : requête ponctuelle, réponse unique. Idéal pour charger des données.
• WebSockets : communication bidirectionnelle et persistante. Chat, jeux, collaboration en temps réel.
• Server-Sent Events : flux de données du serveur vers le navigateur uniquement. Notifications, tableaux de bord live.

Par carabde | Mis à jour le 17 avril 2026