Socket.io的connected属性始终为false，客户端emit事件无响应求助

核心问题 #

你遇到的socket.connected为false的问题，主要由以下几个错误导致：

• React组件重渲染时socket实例被重复创建，原有已连接的实例丢失，新实例未执行连接逻辑
• 连接错误事件名写错，无法捕获连接异常
• 部分事件监听位置错误，存在重复注册风险

具体修复步骤 #

1. 稳定socket实例，避免重渲染重置 #

你当前的socket实例是直接声明在组件内部的，React组件每次重渲染都会重新执行顶层代码，原有已经连接成功的socket实例会被新创建的未连接实例替换，自然出现connected为false的情况。
修复方案：将socket实例移到组件外部全局声明，或用useRef存储确保实例唯一：

// 方案1：全局声明（放在组件代码外面）
const connectionOptions = {
  transports: ["websocket"],
  autoConnect: false,
};
const socket = io("http://localhost:3001", connectionOptions);

function ChatComponent() {
  // 组件逻辑
}

// 方案2：用useRef存储（推荐，适配组件卸载逻辑）
import { useRef, useEffect, useState } from 'react'
function ChatComponent() {
  const socketRef = useRef(null)
  const [users, setUsers] = useState([])

  useEffect(() => {
    // 初始化socket只执行一次
    const connectionOptions = {
      transports: ["websocket"],
      autoConnect: false,
    };
    socketRef.current = io("http://localhost:3001", connectionOptions);

    // 所有事件监听统一在这里注册
    // 修复连接错误事件名（去掉空格）
    socketRef.current.on("connect_error", (err) => {
      if (err.message === "invalid username") {
        console.log("ERROR");
      }
    });

    socketRef.current.on("users", (users) => {
      users.forEach((user) => {
        user.self = user.userID === socketRef.current.id;
      });
      users = users.sort((a, b) => {
        if (a.self) return -1;
        if (b.self) return 1;
        return a.username.localeCompare(b.username);
      });
      setUsers(users)
    });

    // 把user connected监听从users回调里移出来，避免重复注册
    socketRef.current.on("user connected", (user) => {
      setUsers((existingusers) => [...existingusers, user]);
      console.log(user);
    });

    socketRef.current.on("private message", ({ content, from }) => {
      console.log(content);
    });

    // 执行连接
    const username = localStorage.getItem("username");
    socketRef.current.auth = { username };
    socketRef.current.connect();

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

  function SendMessage() {
    const socket = socketRef.current
    // 先判断实例存在且已连接，避免报错
    if (!socket?.connected) return
    socket.emit("test", "hello");
    if (selectChatUser) {
      socket.emit("private message", {
        content: "hello there",
        to: selectChatUser.userID,
      });
    }
  }
  // 其他组件逻辑
}

2. 修复服务端拼写错误 #

服务端认证中间件的错误信息拼写有误，会导致客户端无法正确匹配错误类型：

// 修改前
return next(new Error("invalid usernmae"));
// 修改后
return next(new Error("invalid username"));

验证方法 #

修复后刷新页面，在触发SendMessage方法前先在控制台打印socket实例，确认connected属性为true后再发送事件，服务端即可正常收到请求。

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