Flutter StreamBuilder监听Firebase Realtime Database数据变更不更新问题

你提供的实现代码如下：

late var stream = FirebaseDatabase.instance
     .reference()
     .child("devices")
     .child(user_id);
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: StreamBuilder<Event>(
         stream: stream.onValue,
         builder: (context, snapshot) {
           print('stream updated');
           if (snapshot.hasData &&
               !snapshot.hasError &&
               snapshot.data?.snapshot.value != null) {
             var data = snapshot.data!.snapshot.value;
             handler.updateData(data);
           }
           return Column(
           // 后续布局逻辑
           );
         }
     )
   );
 }

通用排查项 #

首先排除常规问题，可依次核对：

• 确认devices/$user_id节点的读权限没有发生变更，权限不足会导致后续更新推送被拦截
• 确认stream实例没有被重复创建：不要将stream的声明逻辑放在build方法内，否则每次组件刷新都会生成新的监听实例，打断原有长连接
• 确认数据修改的路径和监听路径完全匹配，层级、大小写均无错误
• 检查项目中没有其他逻辑主动调用cancel()取消了该stream的监听订阅

你遇到的平台特有问题说明 #

你最终排查到的现象是Flutter Web端的默认优化策略导致：

Flutter Web运行环境下，浏览器会对非聚焦状态的后台标签页做资源节流，Firebase Realtime Database的实时更新事件会在标签页失焦时暂停派发，直到标签页重新回到聚焦状态才会批量触发积压的所有更新事件。

如果需要实现后台标签页也能实时接收更新，可以添加如下代码强制保持数据库连接活跃：

import 'dart:html' as html;

// 初始化Firebase前添加该监听
html.document.onVisibilityChange.listen((_) {
  if (html.document.hidden == true) {
    FirebaseDatabase.instance.goOnline();
  }
});

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