Question

NGINX CONFIG,SSL,NODE JS, Socket.io

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!


Submit an answer
Answer a question...

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!

Sign In or Sign Up to Answer

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

const socket = io(HTTP://www.example.com/me/chat, {

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

      socket.on("connect_error", err => {
        console.log(`connect_error due to ${err.message}`);
        })

`

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)

KFSys
Site Moderator
Site Moderator badge
June 30, 2022

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.