Nodejs + Socket.io + Nginx Reverse Proxy Not working - node.js

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, you need to tell nginx to send the incoming URI as seen by the client by adding the X-Real-URI header :
proxy_set_header X-Real-URI $request_uri;
The difference between this path and the path eventually seen in your server tells you the base path of the URI.
Then, 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}`;
}