Flutter Web应用部署Bluehost后StreamBuilder组件失效求助

问题概况 #

本地Android Studio运行Flutter Web应用一切正常，但部署到Bluehost服务器后，监听Firestore集合的StreamBuilder组件完全失效，不过Firebase身份验证、非流式读取Firestore数据的功能仍可正常使用。涉及的StreamBuilder代码如下：

StreamBuilder(
                initialData: [UserDetailsModel()],
                stream: Globals.refUser.snapshots(),
                builder: (BuildContext context, snapshot) {
                  if (!snapshot.hasData) return const Text('Loading...');
                  return DataTable(
                    dividerThickness: 5,
                    dataRowHeight: 60,
                    showBottomBorder: true,
                    headingTextStyle: const TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.white),
                    headingRowColor: MaterialStateProperty.resolveWith(
                        (states) => Colors.blueGrey),
                    dataRowColor: MaterialStateProperty.resolveWith(
                        (states) => Colors.white),
                    columns: usersFirestoreController.createUserColumns(),
                    rows: usersFirestoreController.getUsersDetails(
                        context, snapshot),
                  );
                }), 

可能的原因及解决方法 #

1. Bluehost服务器WebSocket限制 #

Firestore流式读取依赖WebSocket连接维持实时更新，Bluehost默认可能限制了WebSocket的使用：

• 联系Bluehost客服确认服务器是否开启WebSocket支持，或在服务器控制面板中手动启用该功能；
• 检查服务器跨域（CORS）配置，确保firestore.googleapis.com等Firebase相关域名被允许发起跨域请求。

2. Firestore安全规则细节问题 #

虽然非流式读取正常，但流式快照的规则检查逻辑可能存在差异：

• 检查Firestore安全规则，确保允许持续监听集合的权限，避免使用仅支持一次性读取的条件：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId} {
        allow read, write: if request.auth != null; // 确保认证用户可维持监听连接
      }
    }
  }
  

3. Flutter Web构建与初始化问题 #

• 确认部署时使用的是正式构建命令：flutter build web --release，Debug构建依赖本地代理，无法适配生产服务器环境；
• 检查web/index.html中的Firebase初始化脚本，确保完整引入Firestore SDK，且配置信息与生产环境匹配，无本地测试用的硬编码内容：

  <!-- 确保包含Firestore SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"></script>
  

4. 缺失错误处理导致问题隐藏 #

当前代码仅检查snapshot.hasData，未处理流式连接的错误状态，无法定位具体问题：

• 修改StreamBuilder添加错误处理逻辑，部署后查看浏览器控制台的错误信息：

  builder: (BuildContext context, snapshot) {
    if (snapshot.hasError) {
      return Text('出错了: ${snapshot.error}');
    }
    if (!snapshot.hasData) return const Text('Loading...');
    // 原有DataTable构建代码
  }
  

5. HTTPS配置缺失 #

Firestore流式连接要求HTTPS环境，若Bluehost站点未配置有效SSL证书，会导致WebSocket连接失败：

• 启用Bluehost提供的免费Let's Encrypt SSL证书，确保站点通过HTTPS访问。

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