LightDark
Cuando se trabaja con WebSockets, es común encontrarse con diferentes problemas que pueden afectar la conexión entre el cliente y el servidor. En este artículo, nos centraremos en un escenario específico donde, a pesar de que el servidor indica que la conexión se ha establecido correctamente, el evento onopen no se activa en el cliente. Si has encontrado el mismo problema, aquí te ofrecemos algunos pasos y consejos para diagnosticar y resolver la situación.
Situación Inicial
En un proyecto utilizando Fastify y el paquete @fastify/websocket para el backend, se intenta establecer una conexión WebSocket desde un archivo HTML/JavaScript en el frontend. El servidor confirma que la conexión se ha establecido, mostrando el mensaje "WebSocket Connection Established". También, la pestaña de red del navegador indica que ha ocurrido un "101 Switching Protocols", lo que significa que el apretón de manos fue exitoso.
Síntomas del Problema
A pesar de estas confirmaciones, el evento onopen del socket en el frontend nunca se activa, y el estado de conexión (readyState) permanece en 0 (CONNECTING). No se generan logs de los eventos onopen, onmessage o onerror.
Pasos que He Tomado
- Registro de Rutas en el Backend: Se registró la ruta
/wsen el backend usandofastify.register(require("@fastify/websocket")). - Conexión en el Frontend: Se configuró la conexión a
ws://localhost:8080/wsdesde un archivo simpleindex.html. - Confirmación en Herramientas de Desarrollo: Las herramientas de desarrollo del navegador confirman el "101 Switching Protocols" en la pestaña de red.
- Revisar Consola: Los logs de la consola demuestran que el script de JavaScript se está ejecutando.
Ejemplo de Código
Backend (Fastify)
const fastify = require("fastify")({ logger: true });
fastify.register(require("@fastify/websocket"));
fastify.get("/ws", { websocket: true }, (connection, req) => {
console.log("🚀 Backend: WebSocket Connection Established!");
connection.socket.on("message", (message) => {
console.log("📩 Server received:", message.toString());
connection.socket.send(`Echo from server: ${message.toString()}`);
});
connection.socket.on("close", () => {
console.log("❌ Client disconnected");
});
});
fastify.listen({ port: 8080 }, (err, address) => {
if (err) {
console.error(err);
process.exit(1);
}
console.log(`✅ Server listening on ${address}`);
});Frontend (index.html)
<!DOCTYPE html>
<html>
<body>
<script>
console.log("📍 Script running...");
window.addEventListener("DOMContentLoaded", () => {
const socket = new WebSocket("ws://localhost:8080/ws");
socket.onopen = () => {
console.log("✅ WebSocket Connected!");
socket.send("Hello from frontend");
};
socket.onmessage = (event) => {
console.log("📩 From server:", event.data);
};
socket.onerror = (err) => {
console.error("❌ WebSocket error:", err);
};
socket.onclose = () => {
console.log("❌ Connection closed");
};
});
</script>
</body>
</html>Preguntas Comunes
1. ¿Por qué el apretón de manos fue exitoso pero el evento onopen no se activa?
Este problema puede surgir debido a varios factores:
-
Configuración del Servidor: Asegúrate de que tu servidor esté correctamente configurado para responder a las solicitudes WebSocket. Revisa la consola del servidor para cualquier error oculto.
-
Problemas de Red: Verifica si hay problemas en la red, como configuraciones de IPv6 que puedan estar interfiriendo con la conexión WebSocket.
- Políticas de Seguridad del Navegador: Algunos navegadores tienen políticas de seguridad que pueden bloquear ciertas conexiones. Revisa la configuración y las extensiones del navegador que puedan afectar el comportamiento de WebSocket.
2. ¿Cómo diagnosticar el problema?
-
Inspección de Consola: Observa los logs del navegador y del servidor. Busca cualquier error o mensaje que explique el fallo.
-
Pruebas Cruzadas: Intenta probar la conexión en diferentes navegadores o ambientes para ver si el problema persiste.
- Revisión de Red: Utiliza herramientas de desarrollo en el navegador para depurar la conexión y asegurar que no haya interrupciones.
Conclusión
En resumen, enfrentar problemas con WebSockets puede ser frustrante, especialmente cuando el servidor parece funcionar correctamente, pero el cliente no responde como se espera. Siguiendo los pasos y consejos que hemos proporcionado, deberías poder identificar y, con suerte, solucionar el problema de onopen que no se activa.