实时看大家都在干嘛？我靠一行监听函数，做了个轻互动小程序

一、监听函数

微信小程序云开发 Collection.watch：监听数据库指定查询条件的数据，当数据更新导致结果变化时，小程序会实时收到更新事件，包含更新内容与最新结果快照。

这是微信小程序云开发的一个函数，如果数据库的数据有变化就会实时推送，可以实现一个类似websocket实现的长链接的效果。

二、轻互动小程序

2.1 功能介绍

一款可以匿名的实时统计状态人数的小程序，实时看有多少人跟你一样在摸鱼、干饭、发呆，还能发弹幕凑热闹。名称叫做 --------- 碰一下状态，你可以用它：

• 实时人数动态变化，一眼看懂大家都在干嘛。
• 解锁附近同状态的人，其实你并不孤独。
• 趣味弹幕互动，看看别人的吐槽。

2.2 截图展示

2.3 开发历程

整个小程序的开发很快，使用低成本、快速开发的云开发模式，像状态的图标使用的都是emoji不需要特殊处理。UI设计、指挥AI写代码、调试 满打满算一周左右，但是这中间遇到不少问题：

第一：查看附近的人，最开始打算使用的是wx.getLocation这个函数可以精确的获取用户的位置，相差不到5米，非企业主体不可申请（担心用户信息泄漏），最终使用wx.getFuzzyLocation代替，跟家符合附近人这个场景。

第二：状态详情的弹幕功能，这个功能坑还是很多的，因为我没有做过这方面的东西，导致我给AI描述功能的时候很笼统模糊，AI写出来的代码有问题，比如弹幕防止重叠、弹幕缺失、弹幕速度，这块费了不少时间。

第三：自定义弹幕审核，微信小程序不允许个人主体开发的小程序拥有让用户发布自定义内容的功能，比如文字评论、图片、视频等，因为他们认为个人没有审核能力。但是弹幕好像是允许的，自定义弹幕的功能我打算在第二个小版本上线。

三、 如何实现？

使用这个函数的前提是得使用微信程序的云开发，Collection.watch函数文档地址

3.1 Collection.watch的使用

1. 获取数据库实例

const db = wx.cloud.database()

2. 指定监听的集合

# xxx 表示数据库名称/集合名称
db.collection('xxx').watch({ onChange, onError })

3. onChange得到实时数据

• snapshot.docs：每次变化都会将全表的数据全部给你，可以用于直接渲染列表。
• snapshot.docChanges：只会给你变更的那些数据，比如新增、更新、删除。用于了解到底改了哪条。

5. 关闭监听

watcher.close()

6. 完整代码：

// 下面的代码直接放进 Page/Component
data: {
  watcher: null, // 存放监听实例
},

onLoad() {
  this.initWatcher();
},

onUnload() {
  // 这里一定要记得关闭监听！ 不然会会内存泄漏
  this.watcher?.close();
},

// 初始化实时监听
initWatcher() {
  const db = wx.cloud.database();
  // status_records 换成你的集合名称
  this.watcher = db.collection('status_records')
    .where({}) // 可加查询条件
    .watch({
      onChange: (snapshot) => {
        console.log('数据变化', snapshot.docs);
        this.setData({
          list: snapshot.docs
        });
      },
      onError: (err) => {
        console.error('监听异常', err);
      }
    });
}

3.2 使用注意事项

1. 监听集合数量限制，一次监听最多 5000 条，超过 5000 条直接报错 + 自动停止监听。所以这款设计数据库以及程序功能设计的时候需要考虑。

2. 集合权限问题，监听本质是读数据，受 数据库权限规则 限制权限不足会直接进入 onError。

3. 不要高频疯狂更新，一定要做防抖。

4. 一定要在页面卸载时关闭监听，防止内存泄漏。

大家有什么建议，或者新奇的玩法，咱们评论区讨论！🫰🫰🫰