Docker环境下Nginx代理Socket.IO连接失败求助

Let’s walk through the fixes step by step—your issue boils down to a few key misconfigurations in the client, Nginx, and Socket.IO setup that are blocking the connection in Docker.

1. Fix the Client Socket.IO Connection #

Your React app runs in the browser, which doesn’t know about Docker’s internal server service name. Instead of hardcoding http://server:8080, connect through the Nginx proxy using a relative path:

// Remove the hardcoded Docker service host; use the proxy path instead
const socket = io({ path: '/ws/socket.io' });
socket.emit('register', XXXX);

This tells Socket.IO to use the same host as your frontend (Nginx’s localhost:8080) and route through the /ws proxy path we’ve set up.

2. Correct Nginx Proxy Path Mapping #

Your Nginx /ws/ location has a missing trailing slash in proxy_pass, which causes incorrect path forwarding. Here’s the corrected config:

upstream frontend { least_conn; server client:8080; }
upstream backend { least_conn; server server:8080; }

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://frontend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /api {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /ws/ {
        # Add the trailing slash to ensure correct path mapping
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        # Add long timeouts to prevent connection drops during idle
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

Why this works: #

Without the trailing slash, Nginx would forward /ws/socket.io to http://backend/ws/socket.io, but your server’s Socket.IO listens on the root path /socket.io. The trailing slash tells Nginx to strip /ws/ from the request path, forwarding it to http://backend/socket.io instead.

3. Configure Socket.IO CORS Explicitly #

Express’s CORS headers don’t fully cover Socket.IO’s own CORS checks. Update your server code to configure Socket.IO’s CORS settings directly:

const express = require('express');
const app = module.exports = express();
const http = require('http').Server(app);
const bodyParser = require('body-parser');
// Add CORS configuration to Socket.IO initialization
const io = require('socket.io')(http, {
  cors: {
    origin: "http://localhost:8080", // Match your Nginx public address
    methods: ["GET", "POST"],
    credentials: true
  }
});
const session = require('express-session');
const MongoStore = require('connect-mongo')(session);

const appInterface = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 8080;

// You can remove the Express CORS headers now, since Socket.IO handles it
// app.use((req, res, next) => { ... });

io.on('connection', (socket) => {
    console.log('one user connected !');
    socket.on('register', (userId) => {
        users[userId] = socket.id;
    });
});

http.listen(port, appInterface.toString(), function (err) {
    console.log('[%s] Listening on http://%s:%d', app.settings.env, appInterface, port);
});

This ensures Socket.IO allows connections from your frontend’s public address (Nginx’s localhost:8080).

4. Verify Docker Service Health #

• Restart all services with docker-compose down && docker-compose up --build to apply changes.
• Check the server logs with docker-compose logs server to confirm it’s listening on 0.0.0.0:8080.
• Open your browser’s dev tools > Network tab, and look for socket.io requests under the WS tab—they should now complete successfully, and your server log will show one user connected !.

内容的提问来源于stack exchange，提问作者Joelito