WebSockets : chat en temps réel 💬

Qu'est-ce qu'un WebSocket ?

Contrairement à HTTP (requete/réponse), les WebSockets maintiennent une connexion permanente entre le client et le serveur.

HTTP	WebSocket
Client envoie → Serveur répond	Bidirectionnel
Chaque requête = nouvelle connexion	Connexion unique maintenue
Adapté pour les CRUD	Adapté pour le temps réel

Installation


npm install socket.io

Serveur WebSocket


// server.js
import { createServer } from 'node:http';
import { Server } from 'socket.io';

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: { origin: '*' }
});

io.on('connection', (socket) => {
  console.log(`Utilisateur connecté : ${socket.id}`);

  socket.on('chat:message', (msg) => {
    io.emit('chat:message', {
      id: socket.id,
      text: msg,
      time: new Date().toLocaleTimeString()
    });
  });

  socket.on('disconnect', () => {
    console.log(`Utilisateur déconnecté : ${socket.id}`);
  });
});

httpServer.listen(3000, () => {
  console.log('Serveur WebSocket sur http://localhost:3000');
});

Client HTML + Socket.io


<!DOCTYPE html>
<html>
<head><title>Chat</title></head>
<body>
  <h1>Chat en temps réel</h1>
  <ul id="messages"></ul>
  <input id="input" placeholder="Écrire un message..." />
  <button onclick="envoyer()">Envoyer</button>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const input = document.getElementById('input');
    const messages = document.getElementById('messages');

    socket.on('chat:message', (data) => {
      const li = document.createElement('li');
      li.textContent = `[${data.time}] ${data.text}`;
      messages.appendChild(li);
    });

    function envoyer() {
      if (input.value.trim()) {
        socket.emit('chat:message', input.value);
        input.value = '';
      }
    }
  </script>
</body>
</html>

Événements Socket.io

Événement	Description
`connection`	Nouveau client connecté
`disconnect`	Client déconnecté
`socket.emit()`	Envoyer un message au serveur
`io.emit()`	Envoyer à TOUS les clients
`socket.to(id).emit()`	Envoyer à un client spécifique

Salles (Rooms)


socket.join('général');
io.to('général').emit('message', 'Bonjour tous !');

Exercices 🎯

Ajoute un champ "pseudo" avant de pouvoir envoyer des messages
Crée un système de salles : l'utilisateur choisit sa salle avant d'entrer
Affiche la liste des utilisateurs connectés en temps réel

⚡ Simulateur — WebSockets

Étape 1/6

📝 Pseudo-code

1const io = require("socket.io")(server);

2io.on("connection", (socket) => {

3 socket.on("message", (msg) => {

4 io.emit("message", msg);

5 });

6});

⚙️ Exécution

📦 Mémoire

Aucune variable

🔀 Flux d'exécution

socket.io(server)

Initialisation de Socket.IO

require("socket.io") initialise Socket.IO sur le serveur HTTP existant. Il gère les connexions WebSocket en temps réel.