微信小程序--聊天室小程序(云开发)
微信小程序 -- 聊天室小程序(云开发)
从微信小程序开发社区更新watch
接口之后,一直在构思这个项目。项目已经完成很久,但是一直都没有空写一篇博客记录展示一下。
开源地址
wx-cloud-im: 基于微信云开发 cloudbase 构建聊天小程序 提供即时通讯
技术栈
云开发 | NodeJS |
功能实现
- 即时消息监听推送
使用
watch
接口(见附录),对数据库信息变动进行监听,实现 订阅-发布 形式的消息推送,同时在小程序端也完成了消息推送聊天界面变化的动画实现
- 文本内容安全核验
使用微信小程序
openapi
对文本内容安全进行校验
- 图片内容安全核验及重复性检查
将图片转为
Buffer
形式上传,并进行内容安全校验,同时计算Buffer
的MD5
值,实现重复性检查
- 历史消息查询
通过对
scroll-view
的ID
锚点的计算,达到平滑切换信息的效果
- 小黑屋功能:禁止用户发言
无法通过内容安全校验的信息会被记录下来,管理员可以调用
cloud-user-black
云函数对对应用户进行封禁,同时计时器自动每天触发一次,用户到达封禁日期期限自动解除发言限制
- 消息位置锚定
scroll-view
新消息和历史消息平滑的动画效果
效果预览
数据表设计
chat-users 聊天室用户信息表
字段 | 说明 | 类型 |
---|---|---|
_id | 数据库记录唯一ID | string |
openid | 用户唯一身份识别ID | string |
userInfo | 用户头像 昵称 地址等信息 | object |
chat-users-ban 聊天室小黑屋信息表
字段 | 说明 | 类型 |
---|---|---|
_id | 数据库记录唯一ID | string |
ban_date | 禁言时长 单位天 | number |
_createTime | 记录创建时间 | string |
_updateTime | 记录更新时间 | string |
chat-msgs 消息记录表
字段 | 说明 | 类型 |
---|---|---|
_id | 数据库记录唯一ID | string |
roomId | 会话房间号 | number |
openid | 消息发送者openid | string |
msgType | 消息类型 目前有 text image | string |
content | 消息内容 text :对应消息内容 image:对应图片地址 | string |
userInfo | 用户头像 昵称 地址等信息 | object |
_createTime | 消息创建时间 | string |
chat-msgs-ban 非法消息记录表(内容/图片安全校验不通过)
字段 | 说明 | 类型 |
---|---|---|
_id | 数据库记录唯一ID | string |
roomId | 会话房间号 | number |
openid | 消息发送者openid | string |
msgType | 消息类型 目前有 text image | string |
content | 消息内容 text :对应消息内容 image:对应图片地址 | string |
userInfo | 用户头像 昵称 地址等信息 | object |
_createTime | 消息创建时间 | string |
拓展开发
项目提供的聊天室Demo
为单聊天室模式,默认roomId = 1
。为如果想要做成多用户聊天不同的形式,如QQ
,只需要做如下几个步骤
-
自定义数据集合,为不同用户之间聊天分配不同的
roomId
-
引用组件时传入不同
roomId
即可<chat-box roomId="{{roomId}}"></chat-box>
-
调用消息发送云函数时,传入
roomId
TIPS
建议复用index/index.js
页面,只需跳转该页面时,携带roomId
参数,并赋值给data
中的roomId
即可
onLoad: function (options){
this.setData({
roomId:options.roomId
})
}
附录
watch
监听集合中符合查询条件的数据的更新事件。使用 watch
时,支持 where
, orderBy
, limit
,不支持 field
。
参数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onChange | function | 是 | 成功回调,回调传入的参数 snapshot 是变更快照,snapshot 定义见下方 | |
onError | function | 是 | 失败回调 |
返回值
Watcher 对象
属性 | 类型 | 说明 |
---|---|---|
close | function | 关闭监听,无需参数,返回 Promise,会在关闭完成时 resolve |
参数说明
snapshot 说明
字段 | 类型 | 说明 |
---|---|---|
docChanges | ChangeEvent[] | 更新事件数组 |
docs | object[] | 数据快照,表示此更新事件发生后查询语句对应的查询结果 |
type | string | 快照类型,仅在第一次初始化数据时有值为 init |
id | number | 变更事件 id |
ChangeEvent 说明
字段 | 类型 | 说明 |
---|---|---|
id | number | 更新事件 id |
queueType | string | 列表更新类型,表示更新事件对监听列表的影响,枚举值,定义见 QueueType |
dataType | string | 数据更新类型,表示记录的具体更新类型,枚举值,定义见 DataType |
docId | string | 更新的记录 id |
doc | object | 更新的完整记录 |
updatedFields | object | 所有更新的字段及字段更新后的值,key 为更新的字段路径,value 为字段更新后的值,仅在 update 操作时有此信息 |
removedFields | string[] | 所有被删除的字段,仅在 update 操作时有此信息 |
QueueType 枚举值
枚举值 | 说明 |
---|---|
init | 初始化列表 |
update | 列表中的记录内容有更新,但列表包含的记录不变 |
enqueue | 记录进入列表 |
dequeue | 记录离开列表 |
DataType 枚举值
枚举值 | 说明 |
---|---|
init | 初始化数据 |
update | 记录内容更新,对应 update 操作 |
replace | 记录内容被替换,对应 set 操作 |
add | 记录新增,对应 add 操作 |
remove | 记录被删除,对应 remove 操作 |
返回值说明
返回值 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()
原文地址:https://www.cnblogs.com/masterchd/p/15225067.html
- Wordpress <= 4.6.1 使用语言文件任意代码执行 漏洞分析
- 如何使用hadoop命令向CDH集群提交MapReduce作业
- Wordpress <= 4.6.1 使用主题文件触发存储型XSS 漏洞分析
- 如何跨平台在本地开发环境提交MapReduce作业到CDH集群
- 区块链行业的机会
- KEGG数据库的rest API(附带R语言小技巧)
- 如何使用Java代码访问HDFS.docx
- Django CSRF Bypass (CVE-2016-7401) 漏洞分析
- 如何使用Cloudera Manager禁用YARN的HA
- Web Worker 中的 importScripts 和 baseHref 同源策略绕过问题
- 如何使用Java代码访问CDH的Solr服务
- Safari UXSS漏洞分析(CVE-2016-4758)
- Sqoop抽取Hive Parquet表数据到MySQL异常分析
- Hue中使用Oozie创建Ssh工作流时sudo命令执行失败问题分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 不是你记忆中的单例模式,但适用的程度,更胜一筹
- 安卓模拟器修改hosts文件
- 为容器化的 Postgres 数据库启用 ssl 连接
- 【SpringBoot web-1】web项目数据校验
- 【SpringBoot web-2】web项目参数传递
- 筛法求素数
- redis学习(十三)
- 【SpringBoot web-3】web项目统一数据封装与全局异常处理
- 送你 8 张图,好好理解一下。
- 【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格
- 【前端系列-2】layui+springboot实现表格增删改查
- 容器技术|Docker三剑客之docker-swarm
- 【前端系列-3】layui表格使用自定义模板templet
- 【前端系列-4】layui表格集成select选择框和switch开关
- 使用docker Registry快速搭建私有镜像仓库(内附干货)