Express服务器与Node.js Socket连接失败问题求助

我开发了一款带协作编辑器的React应用，用户进入Compiler页面后需输入用户名和roomId，通过Socket连接服务器加入房间。但目前Express服务器与Node.js的Socket连接失败，弹出“Socket connection failed”提示。已尝试重启服务器、检查参数，问题仍未解决，恳请帮忙排查原因。

相关代码 #

1. 前端Compiler组件代码 #

import React, { useState, useRef, useEffect } from 'react'
import user from '../components/Client';
import Editor from '../components/Editor';
import { initSocket } from '../socket';
import ACTIONS from '../action';
import { useLocation, useNavigate, Navigate, useParams } from 'react-router-dom'
const Compiler = () => {
    const socketRef = useRef(null);
    const location = useLocation();
    const reactNavigator = useNavigate();
    const { roomId } = useParams();

    useEffect(() => {
        const init = async () => {
            socketRef.current = await initSocket();
            socketRef.current.on('connect_error', (err) => handleErrors(err));
            socketRef.current.on('connect_failed', (err) => handleErrors(err));

            function handleErrors(e) {
                console.log('socket error', e);
                alert("Socket connection failed")
            }
            socketRef.current.emit(ACTIONS.JOIN, {
                roomId,
                username: location.state?.username,
            });
        };
        init();
    }, []);
    const [clients, setClients] = useState([
        { socketId: 1, username: 'aman' },
        { socketId: 2, username: 'am2an' },
    ])
    if (!location.state) {
        return < Navigate to="/" />;
    }
    return <div className='mainblock'>
        <div className='sidebar'>
            <div className='innersidebar'>
                <div className='logo'>
                    <img src='/logo1.png' alt='logo' className='logoimg' />
                </div>
                <h3>Connected</h3>
                <div className='clientsList'>
                    {
                        clients.map((client) => (
                            <client key={client.socketId} username={client.username} />
                        ))
                    }
                </div>
            </div>
            <button className='btn copybtn'>Copy Room ID</button>
            <button className='btn leavebtn'>Leave</button>
        </div>
        <div className='editorblock'>
            <Editor />
        </div>
    </div>
};

export default Compiler;

2. 后端Express服务器代码 #

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require('socket.io');
const ACTIONS = require('./src/action');
const server = http.createServer(app);
const io = new Server(server);

const userSocketMap = {};
function getallConnectedClients(roomId) {
    return Array.from(io.sockets.adapter.rooms.get(roomId) || []).map((socketId) => {
        return {
            socketId,
            username: userSocketMap[socketId],
        };
    })
}
io.on('connection', (socket) => {
    console.log('socket connected', socket.id);
    socket.on(ACTIONS.JOIN, ({ roomId, username }) => {
        userSocketMap[socket.id] = username;
        socket.join(roomId);
        const clients = getallConnectedClients(roomId);
    })
})

const PORT = process.env.PORT || 5000
server.listen(PORT, () => console.log(`Listening on port ${PORT}`));

3. socket.js初始化代码 #

import { io } from "socket.io-client";
export const initSocket = () => {
    const options = {
        'force new connection': true,
        reconnection: true,
        reconnectionAttempts: 'Infinity',
        timeout: 10000,
        transports: ['websocket'],
    };

    const socket = io(process.env.REACT_APP_BACKEND_URL, options);

    socket.on('connect_error', (error) => {
        console.log('Socket connection error:', error);
    });

    socket.on('connect_timeout', () => {
        console.log('Socket connection timeout');
    });

    socket.on('reconnect', (attemptNumber) => {
        console.log(`Socket reconnected after attempt ${attemptNumber}`);
    });

    return socket;
};

排查方向建议 #

1. 环境变量检查

   • 确认前端REACT_APP_BACKEND_URL环境变量是否正确设置，必须包含完整协议（如http://localhost:5000），生产环境需确保域名/IP和端口可被前端访问。
   • 在initSocket中打印process.env.REACT_APP_BACKEND_URL的值，验证配置正确性。

2. 跨域配置缺失

   • Socket.IO v4+默认需要显式配置跨域，后端修改Server初始化代码：

     const io = new Server(server, {
       cors: {
         origin: "http://localhost:3000", // 替换为你的前端实际地址
         methods: ["GET", "POST"]
       }
     });
     

   • 开发环境下确保后端允许前端默认端口（如3000）的跨域请求。

3. 传输方式兼容性问题

   • 前端强制指定transports: ['websocket']可能导致部分环境不兼容，尝试移除该配置，让Socket.IO自动选择合适的传输方式（如先polling再升级到websocket）。

4. 连接时机错误

   • initSocket并非异步函数，但前端用await等待，连接建立是异步过程，建议修改initSocket返回Promise，确保连接成功后再发送事件：

     export const initSocket = () => {
       return new Promise((resolve, reject) => {
         const options = {
           reconnection: true,
           reconnectionAttempts: 'Infinity',
           timeout: 10000,
         };
         const socket = io(process.env.REACT_APP_BACKEND_URL, options);
         socket.on('connect', () => resolve(socket));
         socket.on('connect_error', (err) => reject(err));
       });
     };
     

5. 后端端口与日志验证

   • 检查后端端口（默认5000）是否被其他进程占用，用lsof -i :5000（Linux/Mac）或netstat -ano | findstr :5000（Windows）排查。
   • 查看后端控制台是否有socket connected日志，若无则说明连接未到达后端，重点排查网络或跨域问题。

6. 组件渲染细节修正

   • 前端Compiler组件中<client>标签需改为大写<Client>，React组件首字母必须大写，避免渲染错误。

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