Cómo solucionar el error "failed: Invalid frame header" en Socket.IO con React
Este error puede surgir durante el desarrollo de una aplicación React que usa websockets. Específicamente, ocurre cuando el camino del websocket (/ws) entra en conflicto con la configuración predeterminada de create-react-app, que también utiliza este camino para su funcionalidad de live reload.
Causa del error
El problema se presenta porque create-react-app, al ejecutar npm run start, usa por defecto el camino /ws para manejar las conexiones websocket necesarias para la recarga en vivo (live refresh). Si tu aplicación utiliza también el camino /ws, puede ocurrir un conflicto. Cuando esto sucede, el middleware de proxy en setupProxy.js reenvía ambas conexiones al servidor API, lo que genera un error de cabecera de frame no válido ("Invalid frame header").
Solución
La solución consiste en cambiar el camino del websocket en tu aplicación web a otro diferente, por ejemplo, /websocket, y ajustar la configuración del proxy en setupProxy.js de la siguiente manera:
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
// Cambiar el camino del websocket para evitar conflictos con create-react-app.
createProxyMiddleware('/websocket', {
target: 'http://localhost:3000',
ws: true,
changeOrigin: true,
})
);
};
Con este ajuste, las conexiones de websockets de tu aplicación usarán /websocket, evitando interferir con el camino /ws utilizado por el live refresh de create-react-app.
Ejemplos prácticos
1. Backend Socket.IO: Configura el servidor para escuchar en /websocket en lugar de /ws.
2. Frontend React: Asegúrate de que el cliente de websockets se conecte usando el nuevo camino /websocket.
const socket = io('/websocket'); // Ajuste en el frontend3. Archivo setupProxy.js: Aplica la configuración del middleware proxy como se muestra arriba.
Referencia oficial
Para más información sobre la configuración de http-proxy-middleware, consulta la documentación oficial.
Jorge García
Fullstack developer