Hello! I have a website that is hosted in Digital Ocean
Let’s call it https://example.com
This site has let’s encrypt for SSL certification and it is working fine it has NODE JS as the back end.
Recently I made a new NODE JS application that uses socket.io with REACT JS and runs on port 6000.
I intend to run the new app (a separate node app that runs the whole website) by using https://example.com/me/chat
so I used the below on the default config file
location /me/chat/ { proxy_pass http://localhost:6000/; }
location /me/chat {
proxy_pass http://localhost:6000/;
}
That looks fine up to here and the web page could be loaded.
Now the problem is socket io
inside my main app in node js
const io = require("socket.io")(httpServer, {
path: "/me/chat/socket.io/", // I used without path too
cors: {
origin:
// regarding to origin cors
},
"sync disconnect on unload": true,
});
Inside react JS forsocket.io-client :
const socket = io(HTTP://www.example.com/me/chat, {
path: "/me/chat/socket.io/", // I used without path too
});
and finally, I added the following inside the Nginx default config
location /me/chat/socket.io/ {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:6000/; # I tested this line with http://localhost:6000/socket.io/ or http://localhost:6000/me/chat/socket.io/ too and still does not work
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
The problem is that the socket io in the server never calls when react JS calls it. On the local machine, it is working fine and the problem only happens when I move it to digital ocean and want to do Nginx settings.
Thanks for any input!
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
I hope you found the fix meanwhile but since I got into this trap as well this week I take a second to reply.
What is wrong is the url provided to the client to connect
The last part of the url “me/chat” is a namespace in socket.io and it’s a different concept than the path.
If you look at the error return by the request just before you would see in the response something like “wrong namespace”. That’s what prevents the upgrade to ws: protocol to happen, and so the connection is closed.
You would also see this error by adding in the client
`
You don’t need to have the block at the top of nginx.conf.
I also get the following errors on my client browser: WebSocket connection to ‘wss://example.com/me/chat/socket.io/?EIO=4&transport=websocket&sid=p7jTQqvqDYc0_DHUAAAI’ failed: WebSocket is closed before the connection is established. value @ main.eddee9a8.js:2 Error: Invalid namespace at n.value (main.eddee9a8.js:2:385370) at dl.emit (main.eddee9a8.js:2:357318) at r.value (main.eddee9a8.js:2:392124) at dl.emit (main.eddee9a8.js:2:357318) at n.value (main.eddee9a8.js:2:380063) at r.value (main.eddee9a8.js:2:392075) at dl.emit (main.eddee9a8.js:2:357318) at n.value (main.eddee9a8.js:2:373091) at dl.emit (main.eddee9a8.js:2:357318) at n.value (main.eddee9a8.js:2:359164)
Hi @sam80,
Try to add the location block at the top of the file before any other location directives in your Nginx. I feel like there is a location before the one you’ve mentioned preventing it to load properly.