Websocket with nginx proxy - reactjs

Question

I'm having issues with getting the websocket connected properly with nginx proxy. If I add the port to the use effect it does connect properly.
Here's the react side.
useEffect(() => {
console.log('web socket')
const socket = new WebSocket(`ws://${window.location.hostname}/websocket`);
socket.onopen = () => socket.send('Connected to React')
setSocketIo(socket)
}, [])
Here is the nginx config snippet
location /websocket/ {
proxy_pass http://localhost:8000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
}
This is error I get in the console.
WebSocket connection to 'ws://localhost/websocket' failed:
Error from nginx logs
2022/04/13 13:23:42 [error] 16848#8212: *1499 connect() failed (10061: No connection could be made because the target machine actively refused it) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET /socket.io/?EIO=4&transport=polling&t=O0ac97J HTTP/1.1", upstream: "http://[::1]:3000/socket.io/?EIO=4&transport=polling&t=O0ac97J", host: "localhost", referrer: "http://localhost/guac"
Is it automatically adding the socket.io to the end of hostname?

Answer 1

I use django-channels, and this is my working nginx settings, Hope this helps you. By the way, I'm still not using this in production but this works in development. You can configure to use WebSocket with WSS and that's all.
upstream channels-backend {
server localhost:8000;
# here you connect your channel ip:port
}
server {
server_name example.com www.example.com;
location /static/ {
}
location /media {
}
location / {
include proxy_params;
proxy_pass http://unix:/yourGunicorn.sock;
# This is for Nginx connection to gunicorn
}
location /ws/ {
try_files $uri #proxy_for_websocket;
# websocket connection comes with ws
}
location #proxy_for_websocket {
proxy_pass http://channels-backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
listen [::]:443 ssl ipv6only=on;
listen 443 ssl;
# Your certificate detail here
}
from javascript, you are trying to connect with
const socket = new WebSocket(`ws://${window.location.hostname}/websocket`);
ws protocol and in your nginx you are writing
location /websocket/ {
---
---
}
which is totally wrong. This should be -
location /ws/ {
---
---
}
Hope this helps :)