Socket.io客户端无法稳定接收服务端事件求助

问题现象 #

• 原本正常的Socket通信，将Socket实例拆分到独立文件并在多组件中使用后，客户端无法稳定接收服务端事件，仅偶尔能检测到
• 已排除以下情况：Socket提前断开（仅主动断开才触发handleDisconnect）、客户端未加入目标房间（已核查所有客户端加入的房间）
• 服务端sendChat方法中的console.log('IMHERE with ')每次都能正常打印，但客户端接收temp事件始终不稳定

客户端代码（TypeScript + React） #

// Socket实例独立文件
import { io } from 'socket.io-client';

export const chatSocket = io(`${process.env.REACT_APP_BASE_URL}/chat`, {
    auth: { userId: 0 }, 
});

// 事件监听组件
const HandleChatSocket = () => {
    chatSocket.on('connect', () => {
        console.log('connected with server');
    });

    chatSocket.on('temp', (data: number) => {
        console.log(data);
    });

    return null;
};

服务端代码（NestJS） #

import { WebSocketGateway, OnGatewayConnection, OnGatewayDisconnect, WebSocketServer, SubscribeMessage } from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { ChatService } from './chat.service';

@WebSocketGateway({
    namespace: 'chat',
    cors: {},
})
export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
    constructor(private readonly chatService: ChatService) {}

    @WebSocketServer()
    server: Server;

    async handleConnection(client: Socket, ...args: any[]) {
        console.log('connected');
        const userId = client.handshake.auth.userId; //临时参数
        const rooms = await this.chatService.inquireAllJoinedChatRooms(userId);

        rooms.map((room) => client.join(String(room.id)));
    }

    handleDisconnect(client: any) {
        console.log('Method not implemented.');
    }

    @SubscribeMessage('sendChat')
    async sendChat(
        client: Socket,
        roomId: number
    ): Promise<void> {
        console.log('IMHERE with ');
        const userId = client.handshake.auth.userId; //临时参数

        client.to(String(roomId)).emit('temp', userId);
    }
}

核心原因分析 #

1. 重复注册事件监听器
   React组件重新渲染时，HandleChatSocket会反复执行chatSocket.on()，导致多个相同事件的监听器被注册。这会引发：

   • 部分监听器在组件卸载时未被清理，事件触发时出现逻辑混乱
   • 监听器堆积，直接影响事件接收的稳定性

2. Socket实例生命周期与组件不同步
   全局导出的chatSocket在应用启动时就已创建，若组件挂载时机晚于Socket连接完成的时间，connect事件的监听器会错过触发时机，后续事件接收也可能出现异常

解决方案 #

1. 用React useEffect管理监听器生命周期 #

修改监听组件，通过useEffect包裹事件注册逻辑，并在组件卸载时移除监听器，避免重复注册：

import { useEffect } from 'react';
import { chatSocket } from './path-to-your-socket-file';

const HandleChatSocket = () => {
  useEffect(() => {
    // 定义独立回调函数，方便后续精准移除
    const onConnect = () => {
      console.log('connected with server');
    };

    const onTemp = (data: number) => {
      console.log(data);
    };

    // 注册监听器
    chatSocket.on('connect', onConnect);
    chatSocket.on('temp', onTemp);

    // 组件卸载时清除对应监听器
    return () => {
      chatSocket.off('connect', onConnect);
      chatSocket.off('temp', onTemp);
    };
  }, []); // 空依赖数组确保逻辑只在组件挂载/卸载时执行

  return null;
};

2. 同步Socket连接状态与组件挂载 #

如果需要确保组件挂载时能感知已连接的Socket，可在useEffect中主动检查连接状态：

useEffect(() => {
  if (chatSocket.connected) {
    console.log('connected with server');
  }

  // 其余监听器注册逻辑同上
}, []);

3. 验证服务端房间发送逻辑 #

确认服务端中房间ID的格式完全一致：

• 确保client.join(String(room.id))和client.to(String(roomId))中的房间ID都是字符串格式，避免数字与字符串不匹配导致的事件发送失败

额外排查点 #

• 检查浏览器控制台是否有Socket相关的错误或警告（如CORS配置错误、重连失败）
• 确认process.env.REACT_APP_BASE_URL配置正确，Socket连接地址无误
• 尝试用this.server.to(String(roomId)).emit('temp', userId)替代client.to(...)，排查是否是当前client实例的问题

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