Socket.IO

Une bibliothèque JavaScript bidirectionnelle pour communication en temps réel entre clients et serveurs, idéale pour les chats, jeux multijoueurs et applications collaboratives.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Socket.IO ?

Imaginez que vous utilisez une application de messagerie instantanée. Lorsque quelqu'un vous envoie un message, vous le recevez immédiatement sans avoir besoin de rafraîchir la page. C'est exactement ce que permet Socket.IO : créer des expériences web dynamiques où les informations circulent en temps réel entre les utilisateurs et le serveur.

Socket.IO est une bibliothèque qui facilite la communication bidirectionnelle en temps réel entre les navigateurs web et les serveurs. Contrairement au modèle classique où le navigateur demande des informations au serveur (requête HTTP), Socket.IO permet au serveur d'envoyer des données au navigateur dès qu'elles sont disponibles, sans attendre une demande.

Pourquoi Socket.IO est-il si important ?

Instantanéité

Les données sont transmises immédiatement, sans délai perceptible, ce qui est essentiel pour les chats, les jeux en ligne ou les outils de collaboration.

Fiabilité

Socket.IO garantit la livraison des messages même dans des conditions réseau difficiles, avec reconnexion automatique en cas de coupure.

En résumé, Socket.IO transforme l'expérience web traditionnelle (statique, nécessitant des rafraîchissements) en une expérience dynamique et réactive, similaire à celle d'une application native, où les changements sont reflétés instantanément pour tous les utilisateurs.

Pour les développeurs

Fonctionnement technique

Socket.IO est bâti sur la technologie WebSocket, mais offre des fonctionnalités supplémentaires comme la reconnexion automatique, le support de rooms, les namespaces, et un fallback vers d'autres méthodes de transport lorsque WebSocket n'est pas disponible.

Fonctionnalités essentielles

Configuration de base (côté serveur)

Voici comment configurer un serveur Socket.IO avec Node.js et Express :

Serveur Socket.IO avec Express

// Côté serveur avec Node.js
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:3000", // Autorise les connexions depuis cette origine
    methods: ["GET", "POST"]
  }
});

// Écoute des connexions clients
io.on('connection', (socket) => {
  console.log('Nouveau client connecté:', socket.id);
  
  // Écoute d'un événement personnalisé
  socket.on('message', (data) => {
    console.log('Message reçu:', data);
    
    // Diffuse le message à tous les clients connectés
    io.emit('message', {
      ...data,
      timestamp: new Date().toISOString(),
      userId: socket.id
    });
  });
  
  // Gestion de la déconnexion
  socket.on('disconnect', () => {
    console.log('Client déconnecté:', socket.id);
  });
});

httpServer.listen(3001, () => {
  console.log('Serveur Socket.IO en écoute sur le port 3001');
});

Client Socket.IO (JavaScript)

Comment se connecter et communiquer avec un serveur Socket.IO depuis un navigateur :

Client Socket.IO en JavaScript

// Côté client avec JavaScript pur
const socket = io('http://localhost:3001');

// Connexion établie
socket.on('connect', () => {
  console.log('Connecté au serveur Socket.IO');
  console.log('ID de connexion:', socket.id);
});

// Écoute des messages entrants
socket.on('message', (data) => {
  console.log('Nouveau message reçu:', data);
  // Afficher le message dans l'interface utilisateur
  displayMessage(data);
});

// Envoi d'un message
function sendMessage(text) {
  socket.emit('message', {
    text,
    sender: 'John Doe',
    room: 'general'
  });
}

// Gestion des erreurs
socket.on('connect_error', (error) => {
  console.error('Erreur de connexion:', error);
});

// Déconnexion
socket.on('disconnect', (reason) => {
  console.log('Déconnecté du serveur:', reason);
});

Intégration avec React

Création d'un hook personnalisé pour utiliser Socket.IO dans une application React :

Hook React personnalisé pour Socket.IO

// React Hook personnalisé pour Socket.IO
import { useState, useEffect, useCallback } from 'react';
import { io } from 'socket.io-client';

const useSocket = (url) => {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState([]);

  // Initialisation du socket
  useEffect(() => {
    const socketInstance = io(url, {
      transports: ['websocket'],
      reconnectionAttempts: 5,
      reconnectionDelay: 1000
    });

    // Gestion des événements de connexion
    socketInstance.on('connect', () => {
      setIsConnected(true);
    });

    socketInstance.on('disconnect', () => {
      setIsConnected(false);
    });

    // Écoute des messages
    socketInstance.on('message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });

    setSocket(socketInstance);

    // Nettoyage à la déconnexion
    return () => {
      socketInstance.disconnect();
    };
  }, [url]);

  // Fonction pour envoyer un message
  const sendMessage = useCallback((message) => {
    if (socket && isConnected) {
      socket.emit('message', message);
    }
  }, [socket, isConnected]);

  // Fonction pour rejoindre une room
  const joinRoom = useCallback((room) => {
    if (socket && isConnected) {
      socket.emit('join_room', { room });
    }
  }, [socket, isConnected]);

  return { socket, isConnected, messages, sendMessage, joinRoom };
};

// Utilisation dans un composant
function ChatComponent() {
  const [messageText, setMessageText] = useState('');
  const { isConnected, messages, sendMessage } = useSocket('http://localhost:3001');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (messageText.trim()) {
      sendMessage({
        text: messageText,
        sender: 'User',
        room: 'general'
      });
      setMessageText('');
    }
  };

  return (
    <div className="chat-container">
      <div className="status">
        {isConnected ? '✅ Connecté' : '❌ Déconnecté'}
      </div>
      
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className="message">
            <strong>{msg.sender}:</strong> {msg.text}
            <span className="timestamp">{new Date(msg.timestamp).toLocaleTimeString()}</span>
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={messageText}
          onChange={(e) => setMessageText(e.target.value)}
          placeholder="Tapez votre message..."
          disabled={!isConnected}
        />
        <button type="submit" disabled={!isConnected || !messageText.trim()}>
          Envoyer
        </button>
      </form>
    </div>
  );
}

Namespaces et Rooms

Organisation des connexions avec namespaces et rooms pour une meilleure structure :

Utilisation des namespaces et rooms

// Serveur avec namespaces et rooms
const io = new Server(httpServer);

// Namespace pour le chat
const chatNamespace = io.of('/chat');
chatNamespace.on('connection', (socket) => {
  console.log('Client connecté au namespace chat:', socket.id);
  
  // Rejoindre une room
  socket.on('join_room', ({ room }) => {
    socket.join(room);
    console.log(`Client ${socket.id} a rejoint la room: ${room}`);
    
    // Notification seulement aux membres de cette room
    socket.to(room).emit('user_joined', {
      userId: socket.id,
      room
    });
  });
  
  // Envoyer un message à une room spécifique
  socket.on('room_message', ({ room, message }) => {
    // Émission à tous les clients dans la room, sauf l'émetteur
    socket.to(room).emit('room_message', {
      userId: socket.id,
      message,
      room,
      timestamp: new Date().toISOString()
    });
  });
});

// Namespace pour les notifications système
const notifNamespace = io.of('/notifications');
notifNamespace.on('connection', (socket) => {
  console.log('Client connecté au namespace notifications:', socket.id);
  
  // Authentification (exemple)
  socket.on('authenticate', ({ token }) => {
    // Vérification du token...
    const userId = verifyToken(token);
    if (userId) {
      // Association de l'utilisateur au socket
      socket.data.userId = userId;
      socket.join(`user:${userId}`);
      socket.emit('auth_success');
    } else {
      socket.emit('auth_error', { message: 'Token invalide' });
      socket.disconnect();
    }
  });
});

Fonctionnalités avancées

Middleware d'authentification, gestion des erreurs et reconnexion :

Fonctionnalités avancées

// Middleware d'authentification
io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (isValidToken(token)) {
    const userData = decodeToken(token);
    socket.data.user = userData;
    return next();
  }
  return next(new Error('Authentication error'));
});

// Gestion des erreurs
socket.on('error', (error) => {
  console.error('Erreur Socket.IO:', error);
});

// Reconnexion automatique côté client
const socket = io('https://api.example.com', {
  reconnection: true,
  reconnectionAttempts: 10,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 5000,
  randomizationFactor: 0.5
});

// Événements de reconnexion
socket.on('reconnect_attempt', (attemptNumber) => {
  console.log(`Tentative de reconnexion #${attemptNumber}`);
});

socket.on('reconnect', (attemptNumber) => {
  console.log(`Reconnecté après ${attemptNumber} tentatives`);
  // Réinitialiser l'état de l'application si nécessaire
});

socket.on('reconnect_error', (error) => {
  console.error('Erreur lors de la tentative de reconnexion:', error);
});

socket.on('reconnect_failed', () => {
  console.error('Échec de reconnexion après toutes les tentatives');
  // Afficher un message à l'utilisateur
});

Scalabilité et monitoring

Configuration pour une utilisation à grande échelle avec Redis et outils de surveillance :

Scalabilité et monitoring

// Configuration pour la scalabilité avec Redis Adapter
const { createAdapter } = require('@socket.io/redis-adapter');
const { createClient } = require('redis');

const pubClient = createClient({ url: 'redis://localhost:6379' });
const subClient = pubClient.duplicate();

promise.all([pubClient.connect(), subClient.connect()]).then(() => {
  io.adapter(createAdapter(pubClient, subClient));
  
  io.on('connection', (socket) => {
    // Votre code de gestion des connexions...
  });
  
  httpServer.listen(3000);
});

// Monitoring et métriques
const { instrument } = require('@socket.io/admin-ui');

instrument(io, {
  auth: {
    type: 'basic',
    username: 'admin',
    password: '$2b$10$...'
  },
  mode: 'development'
});

// Limite de taux pour éviter les abus
io.engine.on('connection', (rawSocket) => {
  // Limiter à 100 paquets par seconde
  rawSocket.packetsFn = rateLimiter(100, 1000);
});

function rateLimiter(limitPerSecond, msTimePeriod) {
  const tokens = {};
  
  return (socket) => {
    const socketId = socket.id;
    const currentTime = Date.now();
    
    tokens[socketId] = tokens[socketId] || { 
      tokens: limitPerSecond,
      lastRefill: currentTime
    };
    
    const tokensInfo = tokens[socketId];
    const elapsedTime = currentTime - tokensInfo.lastRefill;
    
    if (elapsedTime > msTimePeriod) {
      tokensInfo.tokens = limitPerSecond;
      tokensInfo.lastRefill = currentTime;
    }
    
    if (tokensInfo.tokens > 0) {
      tokensInfo.tokens -= 1;
      return true;
    } else {
      return false;
    }
  };
}

Intégration avec Next.js

Utiliser Socket.IO dans une application Next.js :

Socket.IO avec Next.js

// pages/api/socket.js
import { Server } from 'socket.io';

const SocketHandler = (req, res) => {
  if (res.socket.server.io) {
    console.log('Socket.IO déjà en cours d'exécution');
    res.end();
    return;
  }

  const io = new Server(res.socket.server);
  res.socket.server.io = io;

  io.on('connection', (socket) => {
    socket.on('message', (data) => {
      io.emit('message', data);
    });
  });

  console.log('Socket.IO démarré');
  res.end();
};

export default SocketHandler;

// Composant React avec Next.js
import { useEffect, useState } from 'react';
import io from 'socket.io-client';

export default function Chat() {
  const [socket, setSocket] = useState(null);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    // Initialiser la connexion Socket.IO
    const initSocket = async () => {
      // Appeler l'API pour démarrer le serveur Socket.IO
      await fetch('/api/socket');
      
      const socketInstance = io();
      
      socketInstance.on('connect', () => {
        console.log('Connecté');
      });
      
      socketInstance.on('message', (data) => {
        setMessages((prev) => [...prev, data]);
      });
      
      setSocket(socketInstance);
      
      return () => socketInstance.disconnect();
    };
    
    initSocket();
  }, []);

  const sendMessage = (e) => {
    e.preventDefault();
    if (input && socket) {
      socket.emit('message', { text: input, sender: 'User' });
      setInput('');
    }
  };

  return (
    <div>
      <h1>Chat en temps réel avec Next.js et Socket.IO</h1>
      
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i}>
            <strong>{msg.sender}:</strong> {msg.text}
          </div>
        ))}
      </div>
      
      <form onSubmit={sendMessage}>
        <input 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          placeholder="Tapez un message"
        />
        <button type="submit">Envoyer</button>
      </form>
    </div>
  );
}

Avantages techniques

Fallback automatique - Utilise WebSocket quand disponible, mais peut se rabattre sur d'autres méthodes (polling HTTP) quand nécessaire
Reconnexion automatique - Gère les problèmes de connexion sans intervention du développeur
Broadcasting - Facilité d'envoi de messages à des groupes d'utilisateurs
Namespaces et Rooms - Organisation logique des connexions et communication ciblée
Détection de déconnexion - Détection fiable quand un client se déconnecte
Support du bufferisation - Peut mettre en buffer les messages pendant une déconnexion
Multiplexage - Plusieurs "canaux" de communication sur une seule connexion

Considérations importantes

Consommation de ressources - Chaque connexion maintenue consomme des ressources serveur
Complexité de scalabilité - Nécessite des solutions comme Redis Adapter pour le scaling horizontal
Sécurité - Importance de valider les données et authentifier les connexions
Latence variable - Les performances dépendent de la qualité de la connexion de l'utilisateur
Support navigateur - Les navigateurs très anciens peuvent avoir des limitations

Applications concrètes

Cas d'usage

Applications de messagerie

Chats en temps réel, messageries d'entreprise, support client live, où les messages sont transmis instantanément sans besoin de rafraîchir l'interface.

Outils collaboratifs

Éditeurs de documents partagés, tableaux blancs collaboratifs, outils de brainstorming où plusieurs utilisateurs peuvent voir et modifier le même contenu simultanément.

Streaming et diffusion en direct

Commentaires en direct pendant les diffusions, notifications en temps réel, affichage des statistiques de visionnage en direct pour les streamers.

Jeux et applications interactives

Jeux multijoueurs en temps réel, applications de quiz en direct, enchères en ligne où les mises à jour doivent être instantanées pour tous les participants.

Tableaux de bord en temps réel

Monitoring, analyses en direct, tableaux de bord financiers avec mises à jour instantanées des métriques importantes sans intervention de l'utilisateur.