Socket.io在React+Express环境下无法正常工作的问题排查

1. 服务端连接事件名拼写错误 #

Socket.io的连接触发事件是全小写的connection，你代码中写成了大写开头的Connection，这会导致服务端完全监听不到新的客户端连接请求。

修复后的服务端代码 #

import express from "express";
import { Server } from "socket.io";
import dotenv from "dotenv";
import cors from "cors";
import AuthRoutes from "./routes/AuthRoutes.js";
import MessageRoutes from "./routes/MessageRoutes.js";

dotenv.config();
const app = express();

app.use(cors());
app.use(express.json());
app.use("/api/auth",AuthRoutes);
app.use("/api/message",MessageRoutes);

// 建议直接指定端口测试，避免环境变量配置问题
const server = app.listen(3005,()=>{
    console.log(`Server Started on port 3005`);
})

const io = new Server(server,{
    cors:{
        origin:'http://localhost:3000'
    }
});

// 修正事件名为小写的connection
io.on("connection",(socket)=>{
    console.log("a new user connected!! ", socket.id); // 打印socket.id更简洁直观
    socket.on("hello",(data)=>{
        console.log("socket hello invoked: ",data)
    })
})

2. 前端未等待连接建立就发送事件 #

Socket.io客户端与服务端的连接是异步操作，你在创建客户端实例后立即调用emit，此时连接可能还未完成，导致事件无法被服务端接收。

修复后的前端代码 #

import {io} from "socket.io-client";
import { useEffect } from "react";

useEffect(()=>{
    const ioClient = io("http://localhost:3005");

    // 监听连接成功事件，确认连接建立后再发送消息
    ioClient.on("connect", () => {
        console.log("connected to server");
        ioClient.emit("hello","yes");
        console.log("emitted");
    });

    // 组件卸载时断开连接，避免内存泄漏
    return () => {
        ioClient.disconnect();
    };
},[])

额外验证步骤 #

• 确认前后端安装的Socket.io版本一致：服务端依赖socket.io，前端依赖socket.io-client，版本不匹配可能导致兼容性问题
• 检查浏览器控制台是否有CORS或连接错误日志
• 确保后端服务确实运行在3005端口

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