SignalR结合React问题：路由导航后WebSocket事件失效

核心问题 #

你遇到的情况是因为WebSocket的消息监听回调和React组件的生命周期脱节了：切换聊天室后，旧的聊天组件已经被卸载，但之前绑定的WebSocket监听回调还在引用旧组件的状态更新函数（比如setMessages），导致新组件的状态根本不会被触发更新；或者每次进入新房间都重复创建WebSocket连接，但没清理旧的监听，导致回调逻辑混乱。

具体修复方法 #

1. 全局复用WebSocket实例（推荐） #

把WebSocket实例放到全局状态容器里（比如React Context），让整个应用共享一个实例，然后在聊天组件里根据当前房间ID过滤消息：

• 先创建一个WebSocket Context，在根组件初始化连接：

// WebSocketContext.js
import { createContext, useContext, useEffect, useState } from 'react';

const WebSocketContext = createContext(null);

export function WebSocketProvider({ children }) {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = new WebSocket('wss://your-api-url/chat');
    setSocket(newSocket);

    return () => {
      newSocket.close();
    };
  }, []);

  return (
    <WebSocketContext.Provider value={socket}>
      {children}
    </WebSocketContext.Provider>
  );
}

export function useWebSocket() {
  return useContext(WebSocketContext);
}

• 然后在聊天组件里获取实例，动态绑定/解绑监听：

import { useEffect, useState } from 'react';
import { useWebSocket } from './WebSocketContext';

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const socket = useWebSocket();

  useEffect(() => {
    if (!socket) return;

    const handleMessage = (event) => {
      const newMessage = JSON.parse(event.data);
      // 只处理当前房间的消息
      if (newMessage.roomId === roomId) {
        setMessages(prev => [...prev, newMessage]);
      }
    };

    socket.addEventListener('message', handleMessage);

    // 组件卸载时一定要移除监听
    return () => {
      socket.removeEventListener('message', handleMessage);
    };
  }, [socket, roomId]);

  // 渲染聊天界面...
}

2. 每个房间独立创建WebSocket连接 #

如果你的后端要求每个房间对应独立的WebSocket连接，就在组件挂载时创建连接，卸载时关闭并清理监听：

import { useEffect, useState } from 'react';

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = new WebSocket(`wss://your-api-url/chat/${roomId}`);
    
    const handleMessage = (event) => {
      const newMessage = JSON.parse(event.data);
      setMessages(prev => [...prev, newMessage]);
    };

    newSocket.addEventListener('message', handleMessage);

    setSocket(newSocket);

    // 组件卸载时关闭连接+移除监听
    return () => {
      newSocket.removeEventListener('message', handleMessage);
      newSocket.close();
    };
  }, [roomId]);

  // 渲染聊天界面...
}

3. 避免闭包陷阱 #

如果你的消息处理回调依赖组件内的状态或props，一定要用useCallback包裹，确保回调引用的是最新的状态值：

import { useEffect, useState, useCallback } from 'react';
import { useWebSocket } from './WebSocketContext';

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  const socket = useWebSocket();

  const handleMessage = useCallback((event) => {
    const newMessage = JSON.parse(event.data);
    if (newMessage.roomId === roomId) {
      setMessages(prev => [...prev, newMessage]);
    }
  }, [roomId]);

  useEffect(() => {
    if (!socket) return;
    socket.addEventListener('message', handleMessage);
    return () => socket.removeEventListener('message', handleMessage);
  }, [socket, handleMessage]);

  // 渲染聊天界面...
}

关键注意点 #

• 组件卸载时必须移除WebSocket的监听，不然会造成内存泄漏，还会触发无效的状态更新。
• 用全局WebSocket实例时，一定要在消息处理里判断房间ID，别把A房间的消息更到B房间的组件里。
• 切换房间时，要么复用连接并更新监听逻辑，要么关闭旧连接再开新的，别留着旧的监听回调。

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