如何在React Native设备休眠时保持SignalR连接持续在线

问题核心 #

react-native-background-timer的普通定时任务在设备进入深度休眠时会被系统暂停，没法维持SignalR的重连逻辑。得针对Android和iOS平台做特定的后台任务配置，同时优化SignalR自身的重连策略。

一、先优化SignalR自带的重连机制 #

别自己手动写轮询了，SignalR本身就有自动重连功能，比手写的靠谱多：

// 修改SignalR类的connection初始化代码
this.connection = new HubConnectionBuilder()
  .withUrl(`${config.api.url}/hub/notificationhub`, {
    headers: {
      AppGuid: this.appGuid,
      AppPhoneNumber: this.mobileNumber,          
      AppCountryCode: this.countryCode,
    },
    timeout: 60000,
    logMessageContent: true,
    transport: HttpTransportType.WebSockets, // 用枚举代替数字1，可读性更强
    skipNegotiation: true,
  })
  .withAutomaticReconnect([0, 2000, 10000, 30000]) // 配置自动重连间隔：立即、2秒、10秒、30秒
  .build();

// 监听重连相关事件，方便排查问题
this.connection.onreconnecting((error) => {
  console.log('SignalR正在重连:', error);
});

this.connection.onreconnected((connectionId) => {
  console.log('SignalR重连成功，新连接ID:', connectionId);
});

this.connection.onclose((error) => {
  console.log('SignalR连接关闭:', error);
});

注意：withAutomaticReconnect是@microsoft/signalr包5.0.0及以上版本才有的功能，确保你的包版本达标

二、Android平台后台任务处理 #

Android设备休眠时，普通后台线程会被系统回收，得用前台服务或者WorkManager来保证任务持久化：

1. 用前台服务维持进程存活

   • 集成react-native-foreground-service包，创建前台服务，保证App进程不被系统杀死（SignalR的自动重连就能正常工作）
   • 在AndroidManifest.xml里添加必要权限：

     <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     

   • 在Provider里启动前台服务：

     import ForegroundService from 'react-native-foreground-service';
     
     useEffect(() => {
       // 初始化前台服务，会在状态栏显示一个通知
       ForegroundService.start({
         id: 1,
         title: '保持连接',
         description: '维持SignalR连接',
         icon: 'ic_notification', // 需要在res/drawable目录添加对应图标
       });
     
       // 组件卸载时停止服务
       return () => {
         ForegroundService.stop();
       };
     }, []);
     

2. 用WorkManager做周期性检查
   如果不需要实时心跳，可使用react-native-work-manager创建周期性任务，每隔一段时间检查连接状态并尝试重连。

三、iOS平台后台任务处理 #

iOS对后台任务限制更严格，得配置后台模式并使用系统允许的API：

1. 开启后台模式

   • 打开Xcode项目的Info.plist，添加UIBackgroundModes数组，包含fetch和remote-notification（如果用推送唤醒）
   • 或者在Xcode项目设置的Signing & Capabilities中添加"Background Modes"，勾选"Remote notifications"和"Background fetch"

2. 使用Background Fetch API
   借助react-native-background-fetch包，它封装了iOS的Background Fetch和Android的JobScheduler：

   import BackgroundFetch from 'react-native-background-fetch';
   
   useEffect(() => {
     // 配置后台任务，iOS强制最小间隔15分钟
     BackgroundFetch.configure({
       minimumFetchInterval: 15,
       stopOnTerminate: false,
       startOnBoot: true,
     }, async (taskId) => {
       // 检查连接状态并尝试重连
       if (signalr.connection?.state === 'Disconnected') {
         await signalr.start();
       }
       // 必须调用finish告知系统任务完成，否则会被系统限制
       BackgroundFetch.finish(taskId);
     }, (error) => {
       console.log('Background Fetch执行出错:', error);
     });
   
     return () => {
       BackgroundFetch.stop();
     };
   }, []);
   

   注意：iOS的Background Fetch最小间隔是15分钟，系统会根据应用活跃度调整实际执行频率，没法做到精确的30秒间隔

四、修复现有代码的小问题 #

1. 修复SignalR单例的参数错误：
   原来的getInstance方法只接收两个参数，但构造函数需要三个，导致countryCode没传入，修改后：

   public static getInstance(appGuid: string, mobileNumber: string, countryCode: string): SignalR {
     if (!SignalR.instance) {
       SignalR.instance = new SignalR(appGuid, mobileNumber, countryCode);
     }  
     if (SignalR.instance.connection?.state === 'Disconnected') {
       SignalR.instance.start();
     }
     return SignalR.instance;
   }
   

2. 清理后台定时器，避免内存泄漏：
   原来的useEffect没清理定时器，补上清理逻辑：

   useEffect(() => {
     const intervalId = backgroundTask(restartConnection);
     return () => {
       BackgroundTimer.clearInterval(intervalId);
     };
   }, []);
   

总结 #

• 优先用SignalR自带的withAutomaticReconnect，减少手动重连的复杂度
• Android用前台服务保证进程存活，iOS用Background Fetch做周期性检查
• 严格遵守平台的后台任务限制，别试图突破系统省电机制，不然会被应用商店拒绝

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