Flutter中如何将后台服务WebSocket流数据传递至主应用

要实现后台服务接收的WebSocket数据实时同步到主应用UI，核心是利用flutter_background_service的进程间通信机制，结合Flutter的Stream来实现数据流转。以下是具体实现步骤和修改后的代码：

1. 后台服务：发送WebSocket数据到主应用 #

在后台服务的WebSocket回调中，通过ServiceInstance.send()将接收到的bookingUpdate数据发送给主应用。需要把ServiceInstance传递到WebSocket连接方法中，确保能调用通信API。

修改onStart和connectWebSocket方法：

@pragma('vm:entry-point')
void onStart(ServiceInstance service) async {
  WidgetsFlutterBinding.ensureInitialized();
  DartPluginRegistrant.ensureInitialized();

  if (service is AndroidServiceInstance) {
    service.on('setAsForeground').listen((event) {
      service.setAsForegroundService();
    });
    service.on('setAsBackground').listen((event) {
      service.setAsBackgroundService();
    });
    service.on('stopService').listen((event) {
      service.stopSelf();
    });
  }

  // 初始化WebSocket时传入service实例
  connectWebSocket('uniqueId', service);

  Timer.periodic(const Duration(seconds: 20), (timer) async {
    if (service is AndroidServiceInstance && await service.isForegroundService()) {
      log('Running background service');
      socket?.disconnect();
      // 重连时也要传入service
      connectWebSocket('uniqueId', service);
    }
  });

  await Firebase.initializeApp();
}

// 修改connectWebSocket，添加ServiceInstance参数
void connectWebSocket(String uniqueId, ServiceInstance service) {
  const String serverUrl = 'http://test.buggyhub.com:4000/';
  socket = IO.io(
    serverUrl,
    IO.OptionBuilder()
        .setTransports(['websocket'])
        .disableAutoConnect()
        .build(),
  );

  socket?.connect();

  socket?.onConnect((_) {
    log('Connected to server with unique ID: $uniqueId');
    socket?.emit('sarthiId', uniqueId);
  });

  socket?.on('connectionResponse', (data) {
    log('Message from server: $data');
  });

  socket?.on('bookingUpdate', (data) async {
    log('Received bookingUpdate from server: $data');
    // 将数据发送到主应用，统一格式方便解析
    await service.send(
      'bookingUpdate',
      data is Map ? data : {'data': data},
    );
  });

  socket?.onDisconnect((_) {
    log('Disconnected from server');
  });
}

2. 主应用：创建Stream接收后台数据 #

在主应用侧（比如全局状态管理类或UI页面），创建StreamController，监听后台服务的bookingUpdate事件，将事件数据添加到流中，供UI订阅。

// 全局或页面级的StreamController，支持多订阅
final bookingUpdateStreamController = StreamController<dynamic>.broadcast();

// 初始化时监听后台服务的消息
void setupBackgroundServiceListener() {
  final service = FlutterBackgroundService();
  service.on('bookingUpdate').listen((event) {
    bookingUpdateStreamController.add(event);
  });
}

3. UI层：订阅Stream实时更新 #

在UI组件中，使用StreamBuilder订阅上述流，实现实时更新：

StreamBuilder<dynamic>(
  stream: bookingUpdateStreamController.stream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final bookingData = snapshot.data;
      // 根据数据渲染UI
      return Text('最新订单更新: ${bookingData.toString()}');
    } else if (snapshot.hasError) {
      return Text('错误: ${snapshot.error}');
    }
    return const Text('等待订单更新...');
  },
)

关键注意事项 #

• 数据序列化：后台发送数据时，确保数据是可序列化的（比如Map、String），避免传递无法跨进程传输的对象。
• StreamController生命周期：记得在页面销毁或应用退出时关闭StreamController，防止内存泄漏。
• 后台保活：Android端确保后台服务处于前台模式（isForegroundMode: true），避免系统杀死进程；iOS端需在Info.plist中配置background modes并勾选对应权限（如Voice over IP）。
• WebSocket重连优化：当前20秒强制重连逻辑可调整为仅在断开时触发，避免频繁断开重连影响稳定性。

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