Error WebSocket connection 3000

[elbiozard]

Description of the bug:

I'm using the app inside a docker container with the port setting 8042:3000, since I'm using port 3000. I also use Ngnx Proxy Manager and access the app from bot.mydomain.com.
In the web console I get the following error:
WebSocketClient.js:13 WebSocket connection to 'wss://bot.mydomain.com:3000/ws' failed:
WebSocketClient @ WebSocketClient.js:13

I can't find where to change the port settings.

Actual vs expected behavior:

No response

Any other information you'd like to share?

No response

[ViaAnthroposBenevolentia]

I am sorry if this will not be useful, and I will waste your time, but I am just a stranger and wanted to add my 0.02 cents.
I packed the repo into one file using repopack, added it into AiStudio, then pasted your issue and got the following response from Gemini Experimental 1206 (Hope you find it helpful):

The issue is that the WebSocket connection is attempting to use port 3000 within the browser, even though you've mapped the container's port 3000 to port 8042 on your host and are using Nginx Proxy Manager to route traffic. The browser is unaware of this port mapping and Nginx configuration.

Here's a breakdown of the problem and the solution:

Problem:

1. Hardcoded Port (Implicit): The application likely implicitly assumes that if it's served from a domain, the WebSocket should connect on the standard HTTPS port (443), unless a port is specifically mentioned in the url. Because you access it via bot.mydomain.com which does not have a port specified, it defaults to 443. However, your WebSocket server is actually running on a different port (due to docker mappings).

2. Nginx Proxy Manager: While Nginx is correctly forwarding HTTP traffic, it's not configured to handle the WebSocket upgrade request to your desired port. The initial HTTP request succeeds, but the subsequent WebSocket connection on a different port fails.

Solution:

The solution involves making the WebSocket URL (including the port) configurable and then properly configuring Nginx Proxy Manager to forward WebSocket traffic.

1. Make WebSocket URL Configurable:

   • Environment Variable: The simplest approach is to introduce an environment variable that controls the WebSocket URL, including the port.

   • Modify App.tsx:

     // ... other imports ...
     const API_KEY = process.env.REACT_APP_GEMINI_API_KEY as string;
     if (typeof API_KEY !== "string") {
       throw new Error("set REACT_APP_GEMINI_APIK_KEY in .env");
     }
     
     // Get the base WebSocket URL from an environment variable, or default to the current host
     const WEBSOCKET_BASE_URL = process.env.REACT_APP_WEBSOCKET_BASE_URL || `wss://${window.location.host}`;
     
     const host = "generativelanguage.googleapis.com";
     
     // Construct the final URL using the base URL
     const uri = `${WEBSOCKET_BASE_URL}/ws/google.ai.generativelanguage.v1alpha.GenerativeService.BidiGenerateContent`;
     
     function App() {
     // ... rest of the component ...

   • Create or Modify .env:
     Add the following line to your .env file, which will set the default behavior of using the host from the URL (what you usually want when not using docker or when using a reverse proxy):

     REACT_APP_WEBSOCKET_BASE_URL=wss://bot.mydomain.com
     

     When running locally without docker, you can use:

     REACT_APP_WEBSOCKET_BASE_URL=ws://localhost:3000
     

2. Configure Nginx Proxy Manager:

   • WebSocket Support: In your Nginx Proxy Manager UI, go to the configuration for your bot.mydomain.com host. In the "Advanced" tab, add the following custom location block:

     location /ws {
         proxy_pass http://your_docker_container_ip_or_name:8042; # Replace with your container's IP or name
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "Upgrade";
         proxy_set_header Host $host;
     }

     Important:

     • Replace your_docker_container_ip_or_name with the actual IP address or the Docker container name of your application. If you're using Docker Compose, you can often use the service name defined in your docker-compose.yml file.
     • Ensure that port 8042 is correctly mapped in your docker-compose or docker run configuration to the internal port of your application inside the container.

Explanation:

• Environment Variable: By using an environment variable, you can change the WebSocket URL without rebuilding the React application. This allows you to easily switch between different environments (development, production, Docker, etc.).
• Nginx location /ws Block:
  • proxy_pass: This directive forwards requests that start with /ws to your application running inside the Docker container on port 8042.
  • proxy_http_version 1.1: Sets the HTTP version for proxying to 1.1, which is needed for WebSocket.
  • proxy_set_header Upgrade $http_upgrade: This header tells the backend server that the client is trying to upgrade to a WebSocket connection.
  • proxy_set_header Connection "Upgrade": This header maintains the "Upgrade" connection type.
  • proxy_set_header Host $host: Forwards the original host header to the backend.

Steps:

1. Update App.tsx as shown above.
2. Add or update your .env file.
3. Rebuild your React app if necessary (npm run build).
4. Update your Nginx Proxy Manager configuration as described.
5. Restart your Docker container and Nginx Proxy Manager.

[elbiozard]

ViaAnthroposBenevolentia

Thanks for the help!
I tried both options but unfortunately they didn't work, it keeps throwing the same error "WebSocketClient.js:13 WebSocket connection to 'wss://mmbot.wis.ar:3000/ws' failed: "