Solución al Error: WebSocket handshake: Unexpected response code: 404

Descripción del Error

El error “WebSocket handshake: Unexpected response code: 404” indica que, al intentar establecer una conexión WebSocket, el servidor ha devuelto un código de respuesta 404 (No encontrado). Esto significa que la URL utilizada para el WebSocket no es válida o no está configurada correctamente en el servidor. Este problema es común en aplicaciones que implementan WebSockets y puede deberse a diversas configuraciones incorrectas o a problemas con el servidor.

Causas Comunes

Existen varias razones por las que puede aparecer este error:

1. URL Incorrecta: La URL del WebSocket puede no estar configurada correctamente en el cliente o el servidor.
2. Configuración del Servidor: El servidor puede no estar configurado para manejar las solicitudes WebSocket adecuadamente.
3. Problemas con el Proxy: Si se utiliza un proxy, este debe estar configurado para permitir las conexiones WebSocket.
4. Versión de Tornado: En algunos casos, la versión de la biblioteca Tornado utilizada en el servidor puede ser incompatible con la configuración de WebSocket.
5. Configuración del Firewall: Un firewall puede estar bloqueando la conexión al puerto utilizado por el WebSocket.

Métodos de Solución

Método 1: Reinstalar Tornado

Una solución común es asegurarse de que la versión correcta de Tornado esté instalada. Sigue estos pasos:

1. Abre la terminal.
2. Desinstala Tornado:
   bash
sudo pip3 uninstall tornado
3. Instala la versión específica de Tornado:
   bash
sudo pip3 install tornado==5.1.1

Esta solución ha funcionado para muchos usuarios que experimentaban el mismo error.

Método 2: Configuración del Proxy Nginx

Si utilizas Nginx como proxy inverso, es esencial que esté correctamente configurado. Añade las siguientes líneas en tu archivo de configuración de Nginx dentro del bloque location correspondiente:

1. Abre tu archivo de configuración de Nginx.
2. Añade las siguientes líneas:
   nginx
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
3. Asegúrate de que el bloque location esté configurado correctamente para tu aplicación.

Estas líneas permiten que Nginx maneje las conexiones WebSocket utilizando el protocolo HTTP/1.1.

Método 3: Actualizar Configuración de Action Cable en Rails

Si utilizas Rails y Action Cable, asegúrate de que tu archivo de configuración development.rb tenga las siguientes líneas:

1. Abre config/environments/development.rb.
2. Añade o modifica la siguiente línea:
   ruby
config.action_cable.allowed_request_origins = [/http:\/\/.*/, /https:\/\/.*/]

Esto permitirá que los orígenes de solicitud permitidos se configuren correctamente para las conexiones WebSocket.

Método 4: Verificar la Configuración de Socket en Phoenix

Si trabajas con Phoenix, asegúrate de que la configuración del socket sea correcta:

1. Abre tu archivo de endpoint:
   “`elixir
   defmodule TuApp.Endpoint do
   use Phoenix.Endpoint, otp_app: :tu_app

   socket “/socket”, TuApp.PostSocket
   end
   “`

2. Asegúrate de que el cliente esté configurado para conectarse al socket:
   “`javascript
   var socket = new Socket(“ws://localhost:4000/socket”,