React-Vite中react-use-websocket组件卸载状态发送异常求助

问题场景 #

在React-Vite项目中使用react-use-websocket实现：组件挂载时向服务器发送active状态，卸载时发送inactive状态。但当前实现存在异常——组件卸载发送inactive后，会再次发送active状态。此外，由于react-use-websocket暂不支持关闭连接，无法通过关闭连接规避该问题。

问题原因 #

原代码中useEffect依赖了readyState和sendJsonMessageToServer：

• 当WebSocket连接状态（readyState）变化时，useEffect会重新执行
• useCallback创建的sendJsonMessageToServer会因readyState变化重新生成，进一步触发useEffect重复执行
• 加上share: true配置会共享WebSocket连接，若其他组件操作连接状态，也可能引发重复发送问题

解决方案 #

核心思路 #

用useRef标记状态发送记录，确保active仅在组件挂载时发送一次；同时调整useEffect执行时机，避免因依赖变化重复触发逻辑。

修改后的代码示例 #

import { useWebSocket, ReadyState } from 'react-use-websocket';
import { useEffect, useCallback, useRef } from 'react';

// 服务器地址
const socketUrl = `wss://my-web-server/v1/api/wall/set/user/status/${token}/${id}`;

const YourComponent = () => {
  const { sendJsonMessage, readyState } = useWebSocket(socketUrl, { share: true });
  // 标记是否已发送过active状态
  const hasSentActive = useRef(false);

  // 发送消息的公共方法
  const sendJsonMessageToServer = useCallback((status: { status: string }) => {
    if (readyState === WebSocket.OPEN) {
      sendJsonMessage(status);
    }
  }, [readyState, sendJsonMessage]);

  useEffect(() => {
    // 发送active逻辑：仅在未发送过且连接打开时执行
    const sendActive = () => {
      if (!hasSentActive.current && readyState === ReadyState.OPEN) {
        sendJsonMessageToServer({ status: "active" });
        hasSentActive.current = true;
      }
    };

    // 初始检查连接状态
    sendActive();

    // 可选：监听连接重连，恢复后重新发送active（根据业务需求决定是否保留）
    const reconnectCheck = setInterval(sendActive, 1000);

    // 卸载时执行的清理逻辑
    return () => {
      clearInterval(reconnectCheck);
      if (readyState === ReadyState.OPEN) {
        sendJsonMessageToServer({ status: "inactive" });
      }
      // 重置标记，避免组件重新挂载时不发送active
      hasSentActive.current = false;
    };
  }, [readyState, sendJsonMessageToServer]);

  return <div>你的组件内容</div>;
};

export default YourComponent;

额外说明 #

• 若不需要在连接断开重连后重新发送active，可移除setInterval相关逻辑
• 使用share: true时，需确保多个组件的WebSocket状态逻辑不冲突，可根据业务场景调整是否共享连接

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