Nodejs + Socket.io + Nginx Reverse Proxy Not working

Question

I'm setting an Nginx reverse proxy to a NodeJS app that includes Socket.IO on a server that hosts additional NodeJs apps.

The NodeJS is running via PM2 on port 3001. Here is the Nginx configuration:

server {
        listen 80;
        server_name iptv-staging.northpoint.org;
        location / {
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header Host $http_host;

                proxy_pass http://localhost:3001;

                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }
}

When running the app via the IP address of the server directly http://xxx.xxx.xxx.xxx:3001/ everything runs without issue. Ping/Pong requests from Socket.IO is around 50ms (default pingTimeout is 5000ms). When accessing the app via its DNS name http://iptv-staging.northpoint.org the client reports a ping timeout and disconnects. It will reconnect on its first try, then disconnect again on the first ping/pong request.

From what I can tell, the problem has to be related to the Ngnix reverse proxy and how websockets are being routed through. It seems to be that the server's reply to a ping request is not making it to the client. But I can't seem to determine why. Any help is much appreciated.

Answer 1

I had exactly the same issue. A guy at work provided the answer and in honesty I didn't fully understand, so no credit for me, but I hope I can tease the answers out of my code.

Firstly, I created an API endpoint on the server that returns URI info. This is the key to telling the client what address to use to connect.

apiRoutes.get('/options', (req, res) => {

  Log.info('Received request for app options.');

  // This isn't applicable to you, just showing where options declared.
  let options = JSON.parse(JSON.stringify(config.get('healthcheck.options')));

  // Decide what port to use.  It might be a port for a dev instance or from Env
  if ((process.env.PORT !== options.port) && (process.env.PORT > 0)) {
    options.port = process.env.PORT;
  }

  // This is the important bit...
  var internalUri = req.originalUrl;
  var externalUri = req.get('X-Real-URI') || internalUri;
  options.basePath = externalUri.substr(0, externalUri.length - internalUri.length + 1);

  res.status(200).send(JSON.stringify(options));
});

My client is a React app, you'll have think how you need to implement, but here's how I did it.

Here's my 'helper' function for calling the Options service...

export async function getOptions() {

  const res = await axios.get('/api/options');

  return res.data;

}

In my React page, I then call this when the page loads...

componentDidMount() {

    getOptions()
        .then((res) => {
            this.setState({ port: res.port });

        // Call a client-side function to build URL.  Incl later.
        const socketUrl = getSocketUrl(res.port);

        console.log(`Attempting to connect to sockets at ${socketUrl}.`);

        // This is where it all comes together...
        const socket = io(socketUrl, { path: `${res.basePath}socket.io` });
        socket.on('connect', function () { console.log(`Connected to ${socketUrl}`); });

        socket.on('message', (result) => {
          console.log(result);
        });

        socket.on('data', (result) => {
          console.log(`Receiving next batch of results.`);

          const filteredResults = JSON.parse(result));

          // Do something with the results here...

        });

    });

.....

Lastly, the getSocketUrl function...

function getSocketUrl(port) {

  console.log(`${window.location.hostname}`);

  if (window.location.hostname.toString().includes('local')) {
    return `localhost:${port}`;
  }

  return `${window.location.hostname}`;

}