Flutter如何实现数据库实时数据同步 GetBuilder对接实时更新方法

GetBuilder本身依赖手动调用update()方法触发UI刷新，要实现无需手动操作的自动数据同步，无需重构现有状态管理逻辑，仅调整Controller层即可，以下是两种适配不同场景的实现方式：

方案1：定时轮询API（改造成本最低） #

适合对实时性要求不高的场景，比如普通商品的库存、价格更新，可灵活调整同步间隔，完全兼容现有业务代码。

实现步骤： #

• 在Controller中创建周期性定时器，按业务需要设置同步间隔（生鲜类应用通常设为30秒~5分钟即可）
• 定时器回调中请求最新接口数据，和本地已有数据做对比，仅当数据发生变更时调用update()触发GetBuilder刷新，避免无效页面重绘
• 页面销毁时记得销毁定时器，避免内存泄漏

代码示例： #

import 'dart:async';
import 'package:get/get.dart';

class GoodsController extends GetxController {
  List<GoodsModel> goodsList = [];
  Timer? _autoSyncTimer;

  @override
  void onInit() {
    super.onInit();
    // 页面初始化时启动自动同步
    _startAutoSyncTask();
  }

  void _startAutoSyncTask() {
    // 每30秒同步一次数据，可根据业务调整间隔
    _autoSyncTimer = Timer.periodic(const Duration(seconds: 30), (timer) async {
      // 请求最新接口数据
      final latestGoodsData = await GoodsApi.fetchGoodsList();
      // 仅数据有变更时触发刷新
      if (latestGoodsData != goodsList) {
        goodsList = latestGoodsData;
        update();
      }
    });
  }

  // 可选：APP切后台暂停同步，切回前台恢复同步，减少性能和流量消耗
  void toggleSyncStatus(bool isActive) {
    if (isActive) {
      _autoSyncTimer?.cancel();
      _startAutoSyncTask();
    } else {
      _autoSyncTimer?.cancel();
    }
  }

  @override
  void onClose() {
    _autoSyncTimer?.cancel();
    super.onClose();
  }
}

方案2：WebSocket服务端推送（真正实时） #

适合秒杀、订单状态更新、库存预警这类对实时性要求极高的场景，数据变更由服务端主动推送，无无效请求。

实现步骤： #

• 后端配合搭建WebSocket服务，数据发生变更时主动推送更新通知到前端
• Controller中初始化WebSocket连接，监听推送消息，收到对应业务的更新通知后，直接用推送的增量数据更新本地状态，或者调用一次最新接口拉取全量数据，之后调用update()触发GetBuilder刷新
• 需要额外处理断连重连、心跳检测等边缘逻辑保证连接稳定性

代码示例： #

import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:get/get.dart';

class GoodsController extends GetxController {
  List<GoodsModel> goodsList = [];
  WebSocketChannel? _webSocketChannel;

  @override
  void onInit() {
    super.onInit();
    _initWebSocketConnection();
  }

  void _initWebSocketConnection() {
    _webSocketChannel = WebSocketChannel.connect(Uri.parse('wss://你的服务端WebSocket地址'));
    // 监听服务端推送消息
    _webSocketChannel?.stream.listen((message) {
      final pushMsg = PushNotifyModel.fromJson(jsonDecode(message));
      // 判断是商品更新的推送消息
      if (pushMsg.notifyType == 'goods_data_update') {
        // 直接用推送的增量数据更新，或者调用接口拉取最新全量数据
        goodsList = pushMsg.updatedGoodsList;
        update();
      }
    });
  }

  @override
  void onClose() {
    _webSocketChannel?.sink.close();
    super.onClose();
  }
}

优化建议 #

• 优先使用增量同步，每次仅拉取上次同步时间之后的变更数据，减少请求体积和数据对比的性能开销
• 短时间内多次收到更新通知的场景可加防抖逻辑，避免频繁调用update()导致页面卡顿
• 非核心页面可降低同步优先级，或者仅在页面处于前台激活状态时开启同步

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