Utilizar Socket.IO con React
Conéctese a un servidor Socket.IO desde React, escuche eventos y emita mensajes desde hooks.
Utilizar Socket.IO con React es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Por qué Socket.IO?
Socket.IO incorpora salas, espacios de nombres, reconexión automática y mensajería basada en eventos sobre WebSockets, con una alternativa de sondeo largo mediante HTTP; resulta mucho más cómodo que usar WebSocket sin procesar.
Instalación del cliente
Instale el paquete cliente de Socket.IO.
npm install socket.io-clientCreación de una instancia de socket
Llame a io(url) fuera de los componentes de React para compartir la conexión y evitar que se cree de nuevo en cada renderizado. Expórtela como un singleton.
// src/lib/socket.ts
import { io } from 'socket.io-client';
export const socket = io('https://api.example.com', {
autoConnect: false, // connect manually
withCredentials: true,
});Conexión en un useEffect
Conéctese cuando el componente se monte y desconéctese cuando se desmonte para evitar conexiones pendientes.
useEffect(() => {
socket.connect();
return () => {
socket.disconnect();
};
}, []);Escucha de eventos
Use socket.on('event', handler) para suscribirse. Elimine el listener en la función de limpieza para evitar controladores duplicados al volver a renderizar.
useEffect(() => {
function onMessage(data) {
setMessages(prev => [...prev, data]);
}
socket.on('message', onMessage);
return () => {
socket.off('message', onMessage);
};
}, []);Emisión de eventos
Llame a socket.emit('event', data) para enviar datos al servidor. Opcionalmente, proporcione una función de callback (confirmación) como último argumento.
function sendMessage(text) {
socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
console.log('Server acknowledged:', ack);
});
}Hook useSocket personalizado
Encapsule la lógica de conexión del socket en un hook personalizado para reutilizarla en distintos componentes.
function useSocket(event, handler) {
useEffect(() => {
socket.on(event, handler);
return () => socket.off(event, handler);
}, [event, handler]);
}
// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));Salas y espacios de nombres
Únase a una sala emitiendo un evento join (gestionado en el servidor). Use espacios de nombres (io('/chat')) para segmentar el tráfico del socket en el nivel de conexión.
// Join a room
socket.emit('join-room', 'room-123');
// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');Estado de la conexión
Realice un seguimiento del estado de la conexión mediante los eventos connect, disconnect y 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');
};
}, []);Emisiones volátiles
Use socket.volatile.emit() para mensajes en los que sea aceptable perder paquetes ocasionalmente (por ejemplo, posiciones del cursor o estado del juego).
// Position updates — OK to lose some
function onMouseMove(e) {
socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}Socket.IO frente a WebSocket sin procesar
Socket.IO añade gestión de salas, espacios de nombres, reconexión automática y compatibilidad con datos binarios sobre WebSocket. Use WebSocket sin procesar si necesita una sobrecarga mínima o si el servidor no admite Socket.IO.
Comprobación rápida
¿Por qué debe eliminar los listeners de eventos de Socket.IO en la función de limpieza de useEffect?
Recapitulación
Cree una instancia singleton de socket con io(url, { autoConnect: false }). Conecte y desconecte en useEffect, elimine siempre los listeners en la función de limpieza y emita eventos con socket.emit(). Encapsule la lógica en un hook personalizado para reutilizarla.
Preguntas frecuentes
¿La lección «Utilizar Socket.IO con React» es gratis?
Sí — el texto completo de «Utilizar Socket.IO con React» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Utilizar Socket.IO con React»?
Conéctese a un servidor Socket.IO desde React, escuche eventos y emita mensajes desde hooks. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Utilizar Socket.IO con React»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de WebSocket en el navegador
- Utilizar Socket.IO con React
- Crear un componente de chat en tiempo real
- Reconexión, gestión de errores y limpieza