微信小程序 -- 聊天室小程序(云开发)

从微信小程序开发社区更新watch接口之后，一直在构思这个项目。项目已经完成很久，但是一直都没有空写一篇博客记录展示一下。

开源地址

wx-cloud-im: 基于微信云开发 cloudbase 构建聊天小程序 提供即时通讯

技术栈

功能实现

• 即时消息监听推送

使用watch接口(见附录)，对数据库信息变动进行监听，实现 订阅-发布 形式的消息推送，同时在小程序端也完成了消息推送聊天界面变化的动画实现

• 文本内容安全核验

使用微信小程序openapi对文本内容安全进行校验

• 图片内容安全核验及重复性检查

将图片转为Buffer形式上传，并进行内容安全校验，同时计算Buffer的MD5值，实现重复性检查

• 历史消息查询

通过对scroll-view的ID锚点的计算，达到平滑切换信息的效果

• 小黑屋功能：禁止用户发言

无法通过内容安全校验的信息会被记录下来，管理员可以调用cloud-user-black云函数对对应用户进行封禁，同时计时器自动每天触发一次，用户到达封禁日期期限自动解除发言限制

• 消息位置锚定 scroll-view

新消息和历史消息平滑的动画效果

效果预览

数据表设计

chat-users 聊天室用户信息表

chat-users-ban 聊天室小黑屋信息表

chat-msgs 消息记录表

chat-msgs-ban 非法消息记录表（内容/图片安全校验不通过）

拓展开发

项目提供的聊天室Demo为单聊天室模式，默认roomId = 1。为如果想要做成多用户聊天不同的形式，如QQ，只需要做如下几个步骤

1. 自定义数据集合，为不同用户之间聊天分配不同的 roomId

2. 引用组件时传入不同roomId即可

   <chat-box roomId="{{roomId}}"></chat-box>
   

3. 调用消息发送云函数时，传入 roomId

TIPS

建议复用index/index.js页面，只需跳转该页面时，携带roomId参数，并赋值给data中的roomId即可

 onLoad: function (options){
	this.setData({
		roomId:options.roomId
	})
}

附录

watch

支持端：小程序 2.8.1, Web

监听集合中符合查询条件的数据的更新事件。使用 watch 时，支持 where, orderBy, limit，不支持 field。

参数

返回值

Watcher 对象

参数说明

snapshot 说明

ChangeEvent 说明

QueueType 枚举值

DataType 枚举值

返回值说明

返回值 Watcher 上只有一个 close 方法，可以用于关闭监听。

orderBy 与 limit

从 2.9.2 起，在监听时支持使用 orderBy 和 limit，如果不传或版本号低于 2.9.2，则默认按 id 降序排列（等同于 orderBy(\'id\', \'desc\')），limit 默认不存在即取所有数据。

示例代码：根据查询条件监听*

const db = wx.cloud.database()
const watcher = db.collection(\'todos\')
  // 按 progress 降序
  .orderBy(\'progress\', \'desc\')
  // 取按 orderBy 排序之后的前 10 个
  .limit(10)
  // 筛选语句
  .where({
    // 填入当前用户 openid，或如果使用了安全规则，则 {openid} 即代表当前用户 openid
    _openid: \'{openid}\'
  })
  // 发起监听
  .watch({
    onChange: function(snapshot) {
      console.log(\'snapshot\', snapshot)
    },
    onError: function(err) {
      console.error(\'the watch closed because of error\', err)
    }
  })

示例代码：监听一个记录的变化

const db = wx.cloud.database()
const watcher = db.collection(\'todos\').doc(\'x\').watch({
  onChange: function(snapshot) {
    console.log(\'snapshot\', snapshot)
  },
  onError: function(err) {
    console.error(\'the watch closed because of error\', err)
  }
})

示例代码：关闭监听

const db = wx.cloud.database()
const watcher = db.collection(\'todos\').where({
  _openid: \'xxx\' // 填入当前用户 openid
}).watch({
  onChange: function(snapshot) {
    console.log(\'snapshot\', snapshot)
  },
  onError: function(err) {
    console.error(\'the watch closed because of error\', err)
  }
})
// ...
// 关闭
await watcher.close()