API de WebSocket: open, message, close y error
Cree una conexión WebSocket, envíe y reciba mensajes en el controlador de eventos message y gestione los errores de conexión y el cierre limpio.
API de WebSocket: open, message, close y error es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 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.
¿Por qué WebSockets?
HTTP funciona mediante solicitudes y respuestas. Para las aplicaciones en tiempo real (chats, juegos multijugador y actualizaciones en directo), necesita una comunicación bidireccional persistente. WebSockets le proporcionan una única conexión TCP que permanece abierta y permite que ambos extremos envíen mensajes en cualquier momento.
Crear un WebSocket
Cree un WebSocket con una URL ws:// o wss://. El navegador gestiona el handshake de actualización.
const ws = new WebSocket('wss://api.example.com/realtime');
// Always use wss:// (secure) in productionLos cuatro eventos
WebSocket tiene cuatro tipos de eventos: open (conectado), message (datos recibidos), close (conexión finalizada) y error (problema).
ws.addEventListener('open', () => {
console.log('Connected');
ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});
ws.addEventListener('message', (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
});
ws.addEventListener('close', (event) => {
console.log('Closed:', event.code, event.reason);
});
ws.addEventListener('error', (event) => {
console.error('Error:', event);
});Enviar mensajes
Use ws.send(). Acepta cadenas, ArrayBuffers, Blobs o ArrayBufferView. Para enviar datos estructurados, ejecute primero JSON.stringify.
ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));
// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);Recibir mensajes
Inspeccione event.data: su tipo coincide con lo que envió el servidor. Use JSON.parse para las cargas útiles que contienen objetos.
ws.addEventListener('message', (event) => {
// typeof event.data: string | ArrayBuffer | Blob
if (typeof event.data === 'string') {
const msg = JSON.parse(event.data);
handleMessage(msg);
}
});Estado de la conexión (readyState)
Compruebe ws.readyState: CONNECTING=0, OPEN=1, CLOSING=2 y CLOSED=3. No envíe nada antes de OPEN.
if (ws.readyState === WebSocket.OPEN) {
ws.send(message);
} else {
console.warn('Not connected yet');
}Cerrar correctamente
Llame a ws.close(code, reason). Códigos de cierre estándar: 1000 (normal), 1001 (desconexión voluntaria), 1008 (incumplimiento de políticas) y 1011 (error del servidor).
ws.close(1000, 'User logged out');Estrategia de reconexión
Los WebSockets se desconectan cuando cambia la red, se reinicia el servidor, etc. Implemente la reconexión con un retroceso exponencial.
let reconnectDelay = 1000;
function connect() {
const ws = new WebSocket('wss://api/realtime');
ws.addEventListener('open', () => { reconnectDelay = 1000; });
ws.addEventListener('close', () => {
setTimeout(connect, reconnectDelay);
reconnectDelay = Math.min(reconnectDelay * 2, 30000);
});
return ws;
}Heartbeats / mantenimiento de la conexión
Los WebSockets inactivos pueden ser cerrados por proxies y balanceadores de carga después de unos 60 s. Envíe un ping cada 25-30 segundos para mantener activa la conexión.
let pingInterval;
ws.addEventListener('open', () => {
pingInterval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));Autenticación
Los WebSockets no admiten encabezados personalizados. Opciones: 1) Autenticarse mediante un token en la cadena de consulta (?token=jwt) de la URL de WS. 2) Enviar un mensaje de autenticación después de open. 3) Usar una cookie (funciona automáticamente para el mismo origen).
// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);
// Auth message:
ws.addEventListener('open', () => {
ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});Hook de React para WebSockets
Encapsule el ciclo de vida de WS en un hook personalizado para evitar que queden conexiones abiertas.
function useWebSocket(url) {
const [messages, setMessages] = useState([]);
const wsRef = useRef(null);
useEffect(() => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.addEventListener('message', (e) => {
setMessages(m => [...m, JSON.parse(e.data)]);
});
return () => ws.close();
}, [url]);
return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}WebSocket frente a HTTP/2 y SSE
WebSocket: dúplex completo; ambos extremos pueden enviar datos. Server push de HTTP/2: obsoleto. Server-Sent Events: solo del servidor al cliente, más sencillo y con reconexión automática. Elija WS cuando el cliente también necesite enviar datos (por ejemplo, en un chat) y SSE para notificaciones unidireccionales.
Comprobación rápida
¿Cuál es el código de cierre estándar de WebSocket para un cierre normal e intencionado (por ejemplo, cuando el usuario cierra sesión)?
Repaso: API de WebSocket
new WebSocket('wss://...') abre la conexión. Cuatro eventos: open, message, close y error. send() acepta string/ArrayBuffer/Blob; use JSON.stringify para los objetos. Compruebe readyState antes de enviar. Use close(1000) para un cierre correcto. Reconecte con un retroceso exponencial. Envíe un heartbeat cada 25 s para mantener la conexión activa. Autentíquese mediante la cadena de consulta o un mensaje de autenticación. Encapsule todo en un hook de React.
Preguntas frecuentes
¿La lección «API de WebSocket: open, message, close y error» es gratis?
Sí — el texto completo de «API de WebSocket: open, message, close y error» 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 «API de WebSocket: open, message, close y error»?
Cree una conexión WebSocket, envíe y reciba mensajes en el controlador de eventos message y gestione los errores de conexión y el cierre limpio. 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 1 de 4.
¿Cuánto tiempo toma la lección «API de WebSocket: open, message, close y error»?
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