示例07 实时数据推送与监听

示例07 实时数据推送与监听

对应教程：第 7 章 · 实时数据推送：监听与协作机制

1. 数据库实时监听

const db = app.database()

// 监听集合变更
const watcher = db.collection('messages')
  .where({ roomId: 'room-001' })
  .watch({
    onChange(snapshot) {
      console.log('数据变更:', snapshot.docs)
      // snapshot.docs 为当前符合条件的全部文档
      // snapshot.type: 'init' | 'update'
      // snapshot.msgType: 'INIT_EVENT' | 'CHANGE_EVENT'
    },
    onError(err) {
      console.error('监听异常:', err)
    }
  })

// 关闭监听
// watcher.close()
​

2. 实时聊天室

// 发送消息
async function sendMessage(roomId, userId, text) {
  await db.collection('messages').add({
    roomId,
    userId,
    text,
    createdAt: db.serverDate()
  })
}

// 监听新消息（增量更新）
function listenMessages(roomId, onNewMessage) {
  let previousDocs = []
  
  return db.collection('messages')
    .where({ roomId })
    .orderBy('createdAt', 'asc')
    .watch({
      onChange(snapshot) {
        const currentDocs = snapshot.docs
        // 找出新增的消息
        const newDocs = currentDocs.filter(
          doc => !previousDocs.find(p => p._id === doc._id)
        )
        newDocs.forEach(onNewMessage)
        previousDocs = currentDocs
      },
      onError(err) { console.error(err) }
    })
}

// 使用
const watcher = listenMessages('room-001', (msg) => {
  console.log(`${msg.userId}: ${msg.text}`)
})
​

3. 连接管理与心跳

// 监听连接状态
const watcher = db.collection('status').watch({
  onChange(snapshot) { /* ... */ },
  onError(err) {
    if (err.code === 'NETWORK_ERR') {
      console.log('网络断开，SDK 将自动重连')
    }
  }
})

// 手动关闭（页面卸载时）
window.addEventListener('beforeunload', () => {
  watcher.close()
})
​

4. 在线人数统计

// 用户进入页面 → 写入在线记录
await db.collection('online_users').add({
  userId: auth.currentUser.uid,
  roomId: 'room-001',
  joinedAt: db.serverDate()
})

// 监听在线用户列表
db.collection('online_users')
  .where({ roomId: 'room-001' })
  .watch({
    onChange(snapshot) {
      document.getElementById('online-count').textContent =
        `在线: ${snapshot.docs.length} 人`
    }
  })
​