0Pricing
Frontend Academy · Leçon

Intégration du client Socket.io

Connectez le client Socket.io, écoutez les événements nommés, émettez des données vers le serveur, gérez la reconnexion et administrez les salons côté client.

Intégration du client Socket.io est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Ce que Socket.io apporte par rapport au WebSocket brut

Socket.io est une bibliothèque populaire basée sur WebSocket. Elle ajoute : la reconnexion automatique, un mécanisme de secours par interrogation longue, les salons et espaces de noms, les fonctions de rappel d'accusé de réception et les événements nommés. Elle associe une bibliothèque cliente à une bibliothèque serveur (Node.js).

Installer le client

Installez socket.io-client. Sa version majeure doit correspondre à celle du serveur.

npm install socket.io-client

Se connecter

Importez io et connectez-vous à une URL de serveur. La fonction renvoie une instance Socket.

import { io } from 'socket.io-client';

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

Émettre des événements

socket.emit(eventName, payload) envoie un événement nommé avec des données : c'est bien plus propre qu'un envoi brut suivi de JSON.parse.

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

Écouter les événements

socket.on(eventName, handler) enregistre un écouteur. Les événements émis par le serveur arrivent ici.

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

Accusés de réception (fonctions de rappel)

Transmettez une fonction de rappel comme dernier argument de emit : le serveur peut l'appeler avec une réponse. C'est comparable à RPC.

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

emitWithAck basé sur une promesse

La version moderne de Socket.io expose emitWithAck, qui renvoie une promesse.

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

Salons

Les salons sont des regroupements de sockets côté serveur. Le client les rejoint ou les quitte en émettant des événements ; le serveur utilise io.to(room).emit() pour diffuser un message.

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

Espaces de noms

Les espaces de noms sont des canaux de communication distincts sur le même serveur, par exemple /chat et /admin. Connectez-vous à un espace de noms en ajoutant son suffixe à l'URL.

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

Reconnexion intégrée

Socket.io se reconnecte automatiquement avec une temporisation exponentielle. Configurez ce comportement au moyen des options.

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

Gérer les déconnexions

Écoutez l'événement de déconnexion pour mettre l'interface à jour (afficher une bannière « reconnexion… »).

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

Intégration à React

Encapsulez le cycle de vie du socket dans une fonction personnalisée ou un fournisseur de contexte.

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

Quand utiliser Socket.io plutôt que WebSocket brut

Socket.io : lorsque vous voulez disposer immédiatement de salons, de fonctions de rappel d'accusé de réception, de la reconnexion automatique et d'un mécanisme de secours pour le transport. WebSocket brut : lorsque vous avez besoin de contrôler directement le protocole, d'une taille de paquet minimale ou de l'interopérabilité avec un serveur qui n'utilise pas Socket.io.

Vérification rapide

Que permet la fonction de rappel passée en troisième argument à emit(event, payload, callback) de Socket.io ?

Récapitulatif : client Socket.io

Bibliothèque basée sur WebSocket : salons, espaces de noms, accusés de réception, reconnexion automatique et mécanisme de secours par interrogation. io(url, options) établit la connexion. emit(event, payload) envoie des événements nommés ; on(event, handler) les écoute. Utilisez la fonction de rappel comme troisième argument ou emitWithAck pour un fonctionnement de type RPC. Les salons sont gérés par le serveur et les espaces de noms par le suffixe de l'URL. La reconnexion est intégrée. Encapsulez le cycle de vie dans une fonction hook React.

Questions Fréquemment Posées

La leçon « Intégration du client Socket.io » est-elle gratuite ?

Oui — le texte complet de « Intégration du client Socket.io » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Intégration du client Socket.io » ?

Connectez le client Socket.io, écoutez les événements nommés, émettez des données vers le serveur, gérez la reconnexion et administrez les salons côté client. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 « Intégration du client Socket.io » ?

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

Oui. Chaque leçon Frontend 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. API WebSocket : ouverture, message, fermeture et erreur
  2. Intégration du client Socket.io
  3. Événements envoyés par le serveur pour la diffusion unidirectionnelle
  4. Schémas d’interfaces en temps réel
← Retour à Frontend Academy