Flutter中如何为实时数据API调用创建监听器

针对你的需求，以下几种方案比定时轮询更高效，能实现类似"listener"的实时数据同步：

1. WebSocket 双向实时通信 #

WebSocket 是服务器与客户端的双向持久连接，服务器可以主动推送更新，无需客户端定时请求。适合需要即时双向交互的场景。

实现步骤： #

• 添加依赖：在pubspec.yaml中加入web_socket_channel包
• 初始化WebSocket通道并监听消息：

import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:flutter/material.dart';

class RealTimePage extends StatefulWidget {
  const RealTimePage({super.key});

  @override
  State<RealTimePage> createState() => _RealTimePageState();
}

class _RealTimePageState extends State<RealTimePage> {
  late final WebSocketChannel _channel;

  @override
  void initState() {
    super.initState();
    // 连接服务器WebSocket端点
    _channel = WebSocketChannel.connect(
      Uri.parse('ws://your-server-url/ws'),
    );
    // 监听服务器推送的消息
    _channel.stream.listen(
      (message) {
        // 解析消息并更新UI状态
        setState(() {
          // 处理返回的数据，比如更新列表或详情
        });
      },
      onError: (error) {
        // 处理连接错误，比如重连逻辑
      },
      onDone: () {
        // 连接断开时的处理，比如自动重连
      },
    );
  }

  @override
  void dispose() {
    _channel.sink.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: _channel.stream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 展示最新数据
            return Text(snapshot.data.toString());
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

注意事项： #

• 需要服务器支持WebSocket协议，后端要实现对应的推送逻辑
• 要处理连接断开、重连的情况，避免数据中断
• APP进入后台时，WebSocket可能会被系统回收，若需后台持续连接，需结合后台权限配置

2. Server-Sent Events (SSE) 单向推送 #

SSE是基于HTTP的单向通信协议，服务器主动向客户端推送数据，比WebSocket更轻量，适合仅需服务器主动更新的场景（比如行情、通知）。

实现步骤： #

• 使用sse_channel包兼容移动端与Web端
• 示例代码：

import 'package:sse_channel/sse_channel.dart';
import 'package:flutter/material.dart';

class SSERealTimePage extends StatefulWidget {
  const SSERealTimePage({super.key});

  @override
  State<SSERealTimePage> createState() => _SSERealTimePageState();
}

class _SSERealTimePageState extends State<SSERealTimePage> {
  late final SseChannel _channel;

  @override
  void initState() {
    super.initState();
    // 连接SSE端点
    _channel = SseChannel.connect(
      Uri.parse('http://your-server-url/sse'),
    );
    _channel.stream.listen(
      (data) {
        // 解析数据并更新UI
        setState(() {});
      },
    );
  }

  @override
  void dispose() {
    _channel.sink.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _channel.stream,
      builder: (context, snapshot) {
        return snapshot.hasData
            ? Text(snapshot.data.toString())
            : const CircularProgressIndicator();
      },
    );
  }
}

3. 后台定时任务（适合APP后台同步） #

如果需要APP在后台也能定期获取最新数据（比如锁屏状态下），可以使用后台任务框架，避免Timer在后台被终止。

实现步骤： #

• 添加workmanager包依赖
• 注册后台任务：

import 'package:workmanager/workmanager.dart';

void callbackDispatcher() {
  Workmanager().executeTask((task, inputData) async {
    // 在这里调用API获取最新数据
    // 可以将数据存入本地数据库（如Hive、SharedPreferences），前台页面监听数据库变化更新UI
    await fetchLatestData();
    return Future.value(true);
  });
}

void initWorkManager() {
  Workmanager().initialize(
    callbackDispatcher,
    isInDebugMode: false,
  );
  // 注册周期性任务，每15分钟执行一次（系统限制最短间隔为15分钟）
  Workmanager().registerPeriodicTask(
    'data-sync-task',
    'sync-data',
    frequency: const Duration(minutes: 15),
  );
}

注意事项： #

• Android和iOS对后台任务的限制不同，iOS需要配置后台模式权限，且后台任务执行频率受系统管控
• 后台任务中避免直接更新UI，建议将数据存入本地存储，前台通过监听存储变化来更新界面

额外优化：结合状态管理 #

不管用哪种方案，建议用Flutter状态管理框架（如Riverpod、Bloc、Provider）来管理实时数据，让UI自动响应数据变化，避免在页面中直接处理状态逻辑。比如用Riverpod的StreamProvider来监听WebSocket/SSE流，UI只需订阅Provider即可自动更新。

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