在生产环境中找不到 Socket.io URL 404，但它在本地主机上运行

Question

我有一个使用express和react.js制作的Web应用程序。一切都在本地计算机上运行，但不知何故，我在使用 pm2 部署到 VPS 上后无法建立连接。然而，快速 HTTP 路由运行良好。当我尝试连接我的前端时，它显示

http://server-ip/socket.io/?EIO=4&transport=polling&t=ORaYCEo 404 (Not Found)

。请帮我解决这个问题。

• 我的nginx默认配置文件

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/pastewetween.com;
    index index.html index.htm index.nginx-debian.html;
    server_name _;
    location / {
        try_files $uri $uri/ =404;
    }
    location /r{
        proxy_pass http://localhost:9000;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

• 带有套接字io的节点服务器

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const http = require('http');
const dotenv = require('dotenv');
const apiRoutes = require('./routes');
const socketRoutes = require('./socketRoutes');
const socketIo = require('./config/socketConfig');





dotenv.config();

// SERVER SETUP
const app = express();
const httpServer = http.createServer(app);
const io = socketIo(httpServer);


// MONGODB CONNECTION
const mongoURI = `mongodb+srv://${process.env.DB_USER}:${process.env.DB_PASS}@tinydbcluster.4m9oard.mongodb.net/${process.env.DB_NAME}?retryWrites=true&w=majority`;


// Or using promises
mongoose.connect(mongoURI, {}).then(
  () => {
    /** ready to use. The `mongoose.connect()` promise resolves to mongoose instance. */
    console.log('MongoDB Connected successfully');
  },
  (err) => {
    /** handle initial connection error */
    console.log("MongoDB Error: ", err);
  }
);


const socketIoRoomMap = new Map();




io.on("connection", (socket) => {
  // Create room and join the room
  socket.on('join-room-from-client', async (roomId) => {
    socketIoRoomMap.set(roomId, { user1: true, user2: false });
    // console.log("join room - ", socketIoRoomMap);
    socket.join(roomId);
  });

  socket.on(
    'connect-user-from-client',
    async (roomId) => {
      const joinedUser = socketIoRoomMap.get(roomId)
      // console.log("Connect room - ",socketIoRoomMap);
      // console.log("match roomId - ", roomId);
      console.log("join user - ", joinedUser);
      if (!joinedUser) {
        console.log("room not found or no user in the room");
        socketIoRoomMap.set(roomId, { user1: true, user2: false });
        return socket.join(roomId);
      } else if (joinedUser.user1 && joinedUser.user2) {
        console.log("No more than 2 user in a room");
        return;
      } else if (!joinedUser.user1) {
        socketIoRoomMap.set(roomId, { user1: true, user2: false });
        console.log("Join room");
        return socket.join(roomId);
      }
      console.log("connected ------- ");
      socketIoRoomMap.set(roomId, { user1: true, user2: true });
      socket.join(roomId);
      io.to(roomId).emit('estanblish-connection-from-server');
    }
  );

  socket.on('disconnect', () => {
    console.log('disconnect - ', socket.rooms); // the Set contains at least the socket ID
  });

  socket.on(
    'send-file-offer-signal',
    ({
      roomId,
      signal,
      uploadedFilename,
    }) => {
      socket
        .to(roomId)
        .emit('getting-offer-signal', { signal, uploadedFilename });
    }
  );

  socket.on('clear-send-file', (roomId) => {
    socket.to(roomId).emit('cancel-send-file')
  });

  socket.on(
    'answer-the-offer',
    ({ signal, roomId }) => {
      console.log('Signal should be answer - ', signal);
      socket.to(roomId).emit('offer-is-been-accepted', signal);
    }
  );
});

// MIDDLEWARE
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/', apiRoutes);



// RUNNING SERVER
const port = process.env.PORT || 9000;
httpServer.listen(port, () => console.log('Server is running on : ' + port));

module.exports = { io };

• 带有react.js的Socket io客户端

import React, { useContext, createContext, useMemo } from 'react';
import io from 'socket.io-client';
import { BACKEND_URL_WS } from '../utils/keys';

const SocketContext = createContext(null);

export function useSocket() {
  return useContext(SocketContext);
}

function SocketProvider({ children }: { children: React.ReactNode }) {
  const socket = useMemo(() => io('ws://191.101.15.217'), []);

  return (
    // @ts-ignore
    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
  );
}

export default SocketProvider;

• 在许多论坛中我搜索，但据说当防火墙阻止端口时会出现此问题，但在这里我正在使用 nginx 进行反向代理，并且其余的 http 路由正在工作。

To                         Action      From
--                         ------      ----
22/tcp                     ALLOW       Anywhere                  
80/tcp                     ALLOW       Anywhere                  
443                        ALLOW       Anywhere                  
Nginx Full                 ALLOW       Anywhere                  
80                         ALLOW       Anywhere                  
9000                       DENY        Anywhere                  
443/tcp                    ALLOW       Anywhere                  
80                         ALLOW       191.101.15.217            
22/tcp (v6)                ALLOW       Anywhere (v6)             
80/tcp (v6)                ALLOW       Anywhere (v6)             
443 (v6)                   ALLOW       Anywhere (v6)             
Nginx Full (v6)            ALLOW       Anywhere (v6)             
80 (v6)                    ALLOW       Anywhere (v6)             
9000 (v6)                  DENY        Anywhere (v6)             
443/tcp (v6)               ALLOW       Anywhere (v6) 

完整项目

Answer 1

已修复：您必须添加一个额外的反向代理，该代理将重定向来自 /socket.io 的所有请求，并且需要对其进行处理：

  location /socket.io {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://localhost:4000; # Adjust if your app is hosted on a different port
    }