Firebase onSnapshot 测试项目

这是一个最小的 Firebase onSnapshot 实时监听测试项目，演示了如何使用 Firebase Firestore 的实时数据同步功能。

功能特性

• ✨ 实时消息同步 - 使用 onSnapshot 监听数据变化
• 📝 发送消息功能
• 🔄 自动更新消息列表
• 🟢 连接状态指示
• 💅 现代化 UI 设计
• 📱 响应式布局

快速开始

1. 设置 Firebase 项目

1. 访问 Firebase Console
2. 创建新项目或选择现有项目
3. 启用 Firestore Database
4. 在项目设置中获取配置信息

2. 配置项目

打开 app.js 文件，将以下配置替换为你的 Firebase 项目配置：

const firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-messaging-sender-id",
    appId: "your-app-id"
};

3. 设置 Firestore 规则

在 Firebase Console 中，进入 Firestore Database > 规则，设置以下规则用于测试：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /messages/{document} {
      allow read, write: if true;
    }
  }
}

⚠️ 注意：这些规则允许任何人读写数据，仅用于测试。生产环境请设置适当的安全规则。

4. 运行项目

1. 使用任何 HTTP 服务器运行项目，例如：

   • Python: python -m http.server 8000
   • Node.js: npx http-server
   • VS Code: 使用 Live Server 扩展

2. 在浏览器中访问 http://localhost:8000

项目结构

firebasetest/
├── index.html      # 主页面
├── app.js          # Firebase 逻辑和 onSnapshot 实现
├── style.css       # 样式文件
└── README.md       # 项目说明

核心代码说明

onSnapshot 监听器

const unsubscribe = onSnapshot(query, 
    (querySnapshot) => {
        // 处理数据更新
    }, 
    (error) => {
        // 处理错误
    }
);

onSnapshot 方法会：

• 立即执行一次，获取当前数据
• 在数据发生变化时自动触发回调
• 返回一个取消订阅的函数

主要功能

1. 实时监听：自动监听 messages 集合的变化
2. 发送消息：通过表单添加新消息到 Firestore
3. 状态指示：显示与 Firebase 的连接状态
4. 自动刷新：消息列表会实时更新，无需手动刷新

测试步骤

1. 打开应用，查看连接状态是否为"已连接"
2. 发送一条消息，查看是否立即显示在列表中
3. 在另一个浏览器窗口打开同样的应用
4. 在任一窗口发送消息，观察两个窗口是否同时更新
5. 在 Firebase Console 中直接添加/修改数据，查看应用是否实时更新

常见问题

连接失败

• 检查 Firebase 配置是否正确
• 确保 Firestore 已启用
• 检查网络连接

消息不显示

• 检查 Firestore 规则是否允许读取
• 查看浏览器控制台是否有错误信息
• 确保集合名称为 messages

发送失败

• 检查 Firestore 规则是否允许写入
• 确保所有必填字段都已填写

扩展建议

• 添加用户认证功能
• 实现消息删除和编辑
• 添加消息分页加载
• 实现离线支持
• 添加文件上传功能
• 实现消息搜索

资源链接

• Firebase 文档
• Firestore onSnapshot API
• Firebase 控制台

License

MIT

---

Firebase 数据库对比测试

除了基本的 onSnapshot 测试，项目还包含了一个完整的 Firestore vs Realtime Database 性能对比测试工具。

访问对比测试页面

在浏览器中打开：http://localhost:8000/database-comparison.html

功能特性

1. 性能对比测试

   • 写入延迟对比
   • 读取延迟对比
   • 批量查询性能
   • 删除操作延迟

2. 可配置测试参数

   • 数据量：1、10、50、100 条
   • 测试轮次：1、3、5 轮
   • 并行测试两个数据库

3. 实时监听测试

   • 同时监听两个数据库的变化
   • 显示更新次数和最后更新时间
   • 每 2 秒自动触发更新

4. 可视化结果

   • 实时进度显示
   • 条形图对比
   • 详细的测试总结

测试前准备

1. 启用 Realtime Database

   • 访问 Firebase Console
   • 点击"创建数据库"
   • 选择"以测试模式启动"

2. 设置 Realtime Database 规则

   {
     "rules": {
       ".read": true,
       ".write": true
     }
   }

性能差异说明

通常情况下：

• Realtime Database：在简单读写操作上可能更快，特别是实时监听
• Firestore：在复杂查询和大数据量操作上表现更好

实际性能取决于：

• 网络延迟
• 数据库区域设置
• 数据结构复杂度
• 并发操作数量

服务器端延迟测试 (Cloud Functions)

前提条件

1. Firebase Blaze 计划：服务器端测试需要使用 Cloud Functions，需要先升级到 Blaze（按需付费）计划
2. Firebase CLI：确保已安装并登录 Firebase CLI

部署 Functions

1. 安装依赖：

cd functions
npm install

2. 部署 Cloud Functions：

firebase deploy --only functions

访问服务器端测试页面

部署成功后，访问：http://localhost:8000/server-test.html

测试功能说明

1. 服务器端性能测试

• 在 Cloud Functions 环境中测试 Firestore 和 Realtime Database 的性能
• 支持配置测试数据量（5-50条）和测试轮次（1-5轮）
• 测试操作：写入、读取、查询、删除
• 显示详细的性能对比分析

2. 实时更新性能测试

• 测试两个数据库在持续更新场景下的性能表现
• 可配置测试时长（5-20秒）和更新间隔（500-2000ms）
• 显示平均延迟对比

3. 客户端 vs 服务器端对比

• 同时运行客户端和服务器端测试
• 分析网络延迟对性能的影响
• 提供详细的测试洞察和原因分析

Cloud Functions 说明

项目包含以下 Cloud Functions：

1. testFirestoreLatency：测试 Firestore 延迟
2. testRealtimeLatency：测试 Realtime Database 延迟
3. compareLatency：对比两个数据库的性能
4. testRealtimePerformance：测试实时更新性能

注意事项

1. 费用：Cloud Functions 在 Blaze 计划下按使用量计费，测试时请注意控制调用次数
2. 区域：Functions 默认部署在 us-central1，可以通过修改 functions/index.js 更改区域
3. 权限：确保 Firestore 和 Realtime Database 的安全规则允许 Functions 访问
4. 性能：服务器端测试结果不包含网络延迟，反映的是数据库本身的性能

测试结果解读

• 服务器端延迟通常比客户端延迟低，因为：

  • 没有网络传输延迟
  • 在同一数据中心内执行
  • 没有客户端 SDK 的额外开销

• Firestore vs Realtime Database：

  • Firestore 通常在复杂查询和大数据量场景下表现更好
  • Realtime Database 在简单读写和实时同步场景下可能更快
  • 实际性能取决于使用场景和数据结构