Socket.io服务端与React.js客户端无法建立连接问题排查

你的代码存在3个直接导致连接异常、看不到状态提示的问题，逐一修复即可：

• 客户端连接地址协议写错：Socket.IO 客户端不需要手动拼接ws://前缀，错误的协议标识会导致连接静默失败
• 未绑定连接状态监听事件：服务端和客户端都没有监听连接成功、失败、断开的回调，自然收不到任何状态提示
• React 中useState是异步批量更新，你在setSocket下一行立刻打印socket变量，拿到的永远是初始值null，不可能获取到刚创建的实例

第一步：修正服务端代码（socketServer/index.js） #

原有基础CORS配置可以补全允许的请求方法，避免跨域预检失败，同时增加基础事件日志方便排查：

const io = require("socket.io")(6000, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  },
});

io.on("connection", (socket) => {
  console.log(`用户已连接，socketID：${socket.id}`);
  
  socket.on("disconnect", (reason) => {
    console.log(`用户断开连接，原因：${reason}`);
  });

  socket.on("error", (err) => {
    console.log("连接异常：", err);
  })
})

服务端启动后先做自检：浏览器访问http://localhost:6000/socket.io/socket.io.js，能返回一段JS代码就说明服务端运行正常，6000端口没有被占用。

第二步：修正客户端代码（client/Messenger.jsx） #

修正连接地址，增加状态监听，补充组件卸载时的连接清理逻辑避免内存泄漏：

import React, { useEffect, useState } from 'react'
import { io } from "socket.io-client";

export default function Messenger() {
    const [socket, setSocket] = useState(null);
    useEffect(() => {
        // 直接传入http地址即可，Socket.IO会自动完成websocket协议升级
        const socketInstance = io("http://localhost:6000", {
          transports: ['websocket', 'polling']
        });

        // 绑定连接状态监听
        socketInstance.on("connect", () => {
          console.log("客户端连接成功，socketID：", socketInstance.id);
        });

        socketInstance.on("connect_error", (err) => {
          console.log("客户端连接失败：", err.message);
        });

        socketInstance.on("disconnect", (reason) => {
          console.log("客户端断开连接，原因：", reason);
        });

        setSocket(socketInstance);

        // 组件卸载时关闭连接
        return () => {
          socketInstance.close();
        }
    }, [])

    return (
        <>
          this is messenger
        </>
    )
}

验证步骤 #

1. 重启socket服务端，确认控制台无端口占用报错
2. 打开前端页面，按F12打开控制台，就能看到连接成功/失败的日志
3. 切到Network面板，能看到状态为101 Switching Protocols的websocket请求，就代表连接建立成功

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