React Native中离开页面时如何断开SignalR连接？

我来帮你搞定这个SignalR连接的问题，核心问题在于你没有保存连接实例的引用，而且导航事件的处理也不够完善。下面是具体的解决方案：

关键改进点 #

1. 保存SignalR连接实例：用useRef来存储连接对象，这样能跨组件渲染周期保留引用，不会每次创建新连接后丢失旧连接的引用。
2. 统一连接/断开逻辑：封装单独的连接和断开函数，避免代码重复，同时确保状态检查逻辑一致。
3. 完善导航事件与组件卸载处理：同时监听页面focus/blur事件，加上组件卸载时的清理逻辑，覆盖所有离开页面的场景（返回、跳转、组件卸载）。

完整代码示例 #

import { useEffect, useRef } from 'react';
import { SecureStore } from 'expo-secure-store';
import { HubConnectionBuilder } from '@microsoft/signalr';
import { useNavigation } from '@react-navigation/native';

const YourPageComponent = () => {
  const navigation = useNavigation();
  // 用ref保存SignalR连接实例，跨渲染周期保留
  const connectionRef = useRef(null);

  // 封装SignalR连接逻辑
  const setupSignalR = async () => {
    // 避免重复创建连接：如果已有活跃连接，直接返回
    if (connectionRef.current?.state === 'Connected') {
      return;
    }

    try {
      const token = await SecureStore.getItemAsync("token");
      const newConnection = new HubConnectionBuilder()
        .withUrl("你的SignalR Hub地址", { accessTokenFactory: () => token })
        .build();

      // 注册消息监听
      newConnection.on("Update", (message) => {
        // 你的业务逻辑处理
        console.log("收到Update消息:", message);
      });

      // 启动连接
      await newConnection.start();
      console.log("SignalR连接已启动");
      connectionRef.current = newConnection;
    } catch (err) {
      console.error("SignalR连接失败:", err);
      connectionRef.current = null;
    }
  };

  // 封装SignalR断开逻辑
  const disconnectSignalR = async () => {
    if (!connectionRef.current) return;

    try {
      await connectionRef.current.stop();
      console.log("SignalR连接已断开");
      connectionRef.current = null;
    } catch (err) {
      console.error("SignalR断开失败:", err);
    }
  };

  useEffect(() => {
    // 页面初始加载时建立连接
    setupSignalR();

    // 监听页面聚焦：如果连接已断开，重新建立
    const focusListener = navigation.addListener('focus', () => {
      setupSignalR();
    });

    // 监听页面失焦：立即断开连接
    const blurListener = navigation.addListener('blur', () => {
      disconnectSignalR();
    });

    // 组件卸载时：断开连接并取消导航监听，防止内存泄漏
    return () => {
      disconnectSignalR();
      focusListener();
      blurListener();
    };
  }, [navigation]);

  return (
    // 你的页面JSX内容
  );
};

export default YourPageComponent;

为什么这个方案有效？ #

• useRef存储连接：确保我们始终能拿到当前活跃的连接实例，不会因为组件重渲染丢失引用，也就不会出现找不到旧连接无法断开的情况。
• 状态检查：连接前先判断当前是否已有活跃连接，避免重复创建。
• 多场景覆盖：
  • 页面切换到后台（blur事件）时立即断开连接；
  • 页面重新聚焦（focus事件）时自动恢复连接；
  • 组件被卸载（比如点击返回键）时，通过useEffect的清理函数强制断开连接并取消导航监听，彻底避免内存泄漏。

额外注意事项 #

• 如果你用的不是Expo的SecureStore，替换成你项目中实际的token存储方式即可。
• 确保SignalR的依赖版本和你的项目兼容，比如@microsoft/signalr的版本要适配React Native环境。
• 可以根据业务需求调整连接恢复的逻辑，比如不需要每次focus都重建连接，而是判断连接状态后决定是否重建。

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