Integración del cliente de Socket.io
Conecte el cliente de Socket.io, escuche eventos con nombre, emita datos al servidor, gestione la lógica de reconexión y administre salas desde el cliente.
Integración del cliente de Socket.io es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Qué aporta Socket.io frente a WebSocket puro
Socket.io es una biblioteca popular construida sobre WebSocket. Añade reconexión automática, fallback a long-polling, salas y espacios de nombres, callbacks de confirmación y eventos con nombre. Utiliza una biblioteca cliente junto con una biblioteca de servidor (Node.js).
Instalar el cliente
Instale socket.io-client. Su versión principal debe coincidir con la del servidor.
npm install socket.io-clientConectarse
Importe io y conéctese a la URL de un servidor. Devuelve una instancia de 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));Emitir eventos
socket.emit(eventName, payload) envía un evento con nombre y datos; es mucho más limpio que usar send y JSON.parse directamente.
socket.emit('chat-message', {
room: 'general',
text: 'Hello everyone!'
});
socket.emit('typing', { user: 'Alice' });Escuchar eventos
socket.on(eventName, handler) registra un listener. Aquí llegan los eventos emitidos por el servidor.
socket.on('chat-message', (msg) => {
console.log(`${msg.user}: ${msg.text}`);
appendMessage(msg);
});
socket.on('user-joined', (user) => {
console.log(`${user.name} joined`);
});Confirmaciones (callbacks de ack)
Pase un callback como último argumento de emit; el servidor puede invocarlo con una respuesta. Es similar a RPC.
socket.emit('create-post', { title: 'Hello' }, (response) => {
if (response.error) {
console.error(response.error);
} else {
console.log('Created post', response.id);
}
});emitWithAck basado en promesas
Las versiones modernas de Socket.io ofrecen emitWithAck, que devuelve una promesa.
try {
const response = await socket.emitWithAck('create-post', { title: 'Hello' });
console.log('Created', response.id);
} catch (err) {
console.error('Failed', err);
}Salas
Las salas son agrupaciones de sockets gestionadas en el servidor. El cliente se une a ellas o las abandona mediante eventos; el servidor usa io.to(room).emit() para emitir a todos los miembros.
// 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' });Espacios de nombres
Los espacios de nombres son canales de comunicación independientes en el mismo servidor, como /chat y /admin. Conéctese a un espacio de nombres añadiendo su sufijo a la URL.
const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');Reconexión integrada
Socket.io se reconecta automáticamente con un retroceso exponencial. Puede configurarlo mediante las opciones.
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));Gestión de desconexiones
Escuche el evento disconnect para actualizar la interfaz (por ejemplo, mostrar un banner «reconectando...»).
socket.on('disconnect', (reason) => {
console.log('Disconnected:', reason);
if (reason === 'io server disconnect') {
// Server kicked us — must reconnect manually
socket.connect();
}
});Integración con React
Encapsule el ciclo de vida del socket en un hook personalizado o en un proveedor de Context.
// 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 };
}Cuándo usar Socket.io frente a WebSocket puro
Socket.io: cuando quiera salas, callbacks de confirmación, reconexión automática y fallback de transporte listos para usar. WebSocket puro: cuando necesite controlar el protocolo directamente, reducir al mínimo el tamaño del bundle o interoperar con un servidor que no use Socket.io.
Comprobación rápida
¿Qué permite hacer el callback del tercer argumento de emit(event, payload, callback) de Socket.io?
Repaso: cliente de Socket.io
Biblioteca construida sobre WebSocket: salas, espacios de nombres, confirmaciones, reconexión automática y fallback a polling. io(url, options) establece la conexión. emit(event, payload) envía eventos con nombre; on(event, handler) los escucha. Use el callback del tercer argumento o emitWithAck para un estilo RPC. Las salas se gestionan mediante el servidor y los espacios de nombres, mediante el sufijo de la URL. La reconexión está integrada. Encapsule el ciclo de vida en un hook de React.
Preguntas frecuentes
¿La lección «Integración del cliente de Socket.io» es gratis?
Sí — el texto completo de «Integración del cliente de Socket.io» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Integración del cliente de Socket.io»?
Conecte el cliente de Socket.io, escuche eventos con nombre, emita datos al servidor, gestione la lógica de reconexión y administre salas desde el cliente. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 «Integración del cliente de Socket.io»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- API de WebSocket: open, message, close y error
- Integración del cliente de Socket.io
- Server-Sent Events para streaming unidireccional
- Patrones de UI en tiempo real