0Pricing
React Academy · Leçon

Utiliser Socket.IO avec React

Connectez React à un serveur Socket.IO, écoutez les événements et émettez des messages depuis des hooks.

Utiliser Socket.IO avec React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Socket.IO ?

Socket.IO ajoute des salons, des espaces de noms, une reconnexion automatique et une messagerie fondée sur les événements par-dessus des WebSockets, avec une solution de repli utilisant l’interrogation longue HTTP — bien plus ergonomique qu’un WebSocket brut.

Installer le client

Installez le paquet client de Socket.IO.

npm install socket.io-client

Créer une instance de socket

Appelez io(url) en dehors des composants React afin que la connexion soit partagée et ne soit pas recréée à chaque rendu. Exportez-la en tant qu’instance unique.

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

Se connecter dans useEffect

Connectez-vous lorsque le composant est monté et déconnectez-vous lorsqu’il est démonté afin d’éviter les connexions persistantes inutiles.

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Écouter les événements

Utilisez socket.on('event', handler) pour vous abonner. Supprimez l’écouteur dans la fonction de nettoyage afin d’éviter les gestionnaires en double lors d’un nouveau rendu.

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

Émettre des événements

Appelez socket.emit('event', data) pour envoyer des données au serveur. Vous pouvez également fournir une fonction de rappel (accusé de réception) comme dernier argument.

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

Hook useSocket personnalisé

Encapsulez la logique de connexion du socket dans un hook personnalisé afin de la réutiliser entre les composants.

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

Salons et espaces de noms

Rejoignez un salon en émettant un événement de connexion au salon (géré côté serveur). Utilisez des espaces de noms (io('/chat')) pour segmenter le trafic des sockets au niveau de la connexion.

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

État de la connexion

Suivez l’état de la connexion avec les événements connect, disconnect et connect_error.

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

Émissions volatiles

Utilisez socket.volatile.emit() pour les messages dont la perte occasionnelle de paquets est acceptable (par ex. les positions du curseur ou l’état du jeu).

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO et WebSocket brut

Socket.IO ajoute la gestion des salons, les espaces de noms, la reconnexion automatique et la prise en charge des données binaires par-dessus WebSocket. Utilisez WebSocket brut si vous avez besoin d’une surcharge minimale ou si le serveur ne prend pas Socket.IO en charge.

Vérification rapide

Pourquoi devez-vous supprimer les écouteurs d’événements Socket.IO dans le nettoyage de useEffect ?

Récapitulatif

Créez une instance unique de socket avec io(url, { autoConnect: false }). Connectez-vous et déconnectez-vous dans useEffect, supprimez toujours les écouteurs lors du nettoyage et émettez les événements avec socket.emit(). Encapsulez la logique dans un hook personnalisé afin de la réutiliser.

Questions Fréquemment Posées

La leçon « Utiliser Socket.IO avec React » est-elle gratuite ?

Oui — le texte complet de « Utiliser Socket.IO avec React » 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 « Utiliser Socket.IO avec React » ?

Connectez React à un serveur Socket.IO, écoutez les événements et émettez des messages depuis des hooks. 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 2 sur 4.

Combien de temps prend la leçon « Utiliser Socket.IO avec React » ?

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