云开发私人实时聊天室
说明
在最开始开发小程序时，本人和团队成员实现小程序的聊天室时遇到一些困难，查阅了一些资料，有些讲得太泛，有些讲的太难，在一个阶段克服了这个困难后，收获了很多，对整个流程也熟悉了很多，在这里记录自己的一个思路，希望也能对开发新手有帮助。
项目基本配置
1.项目创建及云开发配置：
官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/quick-start/miniprogram.html
PS：注意云函数目录是否为此样式：
若是普通目录样式记得在project.config.json中配置加入：
2.添加包colorui，用于样式使用，并在app.wxss中导入改包
3.在pages下新建文件夹index和新建page：index
聊天室静态页面
最终呈现的效果：
自己：
对方：
1. wxml
整体结构：
整一个页面说白了就是由一个scroll-view和一个回复框组成，scroll-view中由消息数组构成，消息的内容可以自己定义（时间，头像，消息内容等等）
具体源码：
<!-- scroll-view来实现页面拖动 -->
<scroll-view id='page' scroll-into-view="{{toView}}" upper-threshold="100"
scroll-y="true" enable-back-to-top="true" class="message-list">
<!-- 每一条消息 -->
<view class="cu-chat" wx:for="{{3}}" wx:key="index" id="row_{{index}}">
<!-- 自己发出的消息 -->
<block wx:if="{{false}}">
<block wx:if="{{true}}">
<view class="datetime" style="width:100%">2021-11-16 18:10</view>
</block>
<view class="cu-item self"
style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<view class="main">
<view class="content bg-green shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx">
<text style="font-size:33rpx">这是一条消息</text>
</view>
</view>
<view class="cu-avatar radius center"
style="background-image: url({{useravatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx"
bindtap="go_myinfo"></view>
</view>
</block>
<!-- 对方发出的消息 -->
<block wx:else>
<block wx:if="{{true}}">
<view class="datetime" style="width:100%">2021-11-16 19:10</view>
</block>
<view class="cu-item"
style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<view class="cu-avatar radius center"
style="background-image: url({{match_avatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
</view>
<view class="main">
<view class="content bg-white shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx">
<text style="font-size:33rpx">这是对面的一条消息</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
<!-- 回复框 -->
<view class="reply cu-bar">
<!-- 输入框 -->
<view class="opration-area">
<input type="text" bindinput="getContent" value="{{textInputValue}}" maxlength="300" cursor-spacing="10"
style="width: 544rpx; height: 64rpx; display: block; box-sizing: border-box;"></input>
</view>
<!-- 发送按钮 -->
<button class="cu-btn bg-green shadow" bindtap='sendMsg'
style="width: 150rpx; height: 64rpx; display: flex; box-sizing: border-box; left: -22rpx; top: 0rpx; position: relative">发送</button>
</view>
2. wxss
一些样式的配置，具体就不详细叙述了，见源码：
/*消息窗口*/
.message-list {
margin-bottom: 54px;
}
/*文本输入或语音录入*/
.reply .opration-area {
flex: 1;
padding: 8px;
}
/*回复文本框*/
.reply input {
background: rgb(252, 252, 252);
height: 36px;
border: 1px solid rgb(221, 221, 221);
border-radius: 6px;
padding-left: 3px;
}
/*回复框*/
.reply {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 108rpx;
border-top: 1px solid rgb(215, 215, 215);
background: rgb(245, 245, 245);
}
/*日期*/
.datetime {
font-size: 10px;
padding: 10px 0;
color: #999;
text-align: center;
}
到此，静态的页面就已经做好啦，现在主要的难题也是数据部分，下面将先讲述数据库chatroom的设计及解释，最后进行js的代码编写。
数据库创建及设计
1.数据库表创建：
在编辑器打开云开发控制台，点击数据库，再点击集合名称右边加号，创建一个集合名称为chatroom的表。
2.chatroom设计
具体页面如图：
其中，
_id为记录创建时自动创建的标识属性，即主键
_openid和match_openid代表了自身和对方
records为一个对象数组，每个对象的属性分别是：
msgText：消息属性（此案例中只有text属性，即文本，可自扩展为图片、音频等）
openid：发送人的标识
sendTime：消息创建时间
sendTimeTS：消息创建时的时间戳（用于做时间比较，判断时间显示）
showTime：消息是否显示时间
textContent：具体文本内容
其中，
records：array类型，
records中的记录：object类型
records中的sendTimeTS：number类型
records中的showTime：boolean类型
其余全为string类型
PS：
1、openid和match_openid可标识一个聊天室，是唯一不变的；
2、用户本身的openid是有可能在记录中的match_openid位置上的，谁发起了这个聊天室，openid这个位置就是那个发起用户的openid，所以在开发中，想要获取自己和所有其他人的聊天室，要查每条记录中的openid或者match_openid与自身openid是否匹配。
3.权限设置
因为该表中的记录，非记录创建者也可以进行读写，这里的权限记得设置，不然会出问题：
具体功能实现（JS写法）
1.先配置Page.data：6个属性，如有需要可自行扩展
chats存储数据库表中的records的所有信息；
textInputValue是输入框内容。
2.绑定数据库表onChange函数：
这里的onChange输出e是这样的：
type=init，获取了数据库表中该记录的所有内容，在这里将js中的chats进行赋值即可；
另外，当该记录内容变化时，type是update类型
3.wxml修改，wx-for将chats显示，以及一些判断和内容显示的设置：
到此，显示效果就有啦
接下来，就是信息的添加了，下面将显示如何添加新信息到数据库
4.发送信息
先获取输入框内容：
发送函数：
增加一条信息，就是在records数组中加一条记录，所以在函数内部要对新纪录的属性进行一些赋值和判断等。
对showTime的处理：
消息空白处理：
对消息内的所有属性进行一个打包处理：
存储记录，并滑动页面：
最后，清空消息框内容
发送一条消息，最终效果如图：
js源码
const app = getApp()
const db = wx.cloud.database()
const _ = db.command
const chatroomCollection = db.collection("chatroom")
var util = require('../../utils/util.js');
Page({
data: {
//这里的openid和match_openid应该是在上一级页面传进来的属性，这里由于只有聊天室所以暂时设置为一些固定值，用于测试
openid:'',
match_openid:'',
//这里的avatar是头像，具体传参方式自己设定，这里暂时设置为固定值，用于测试
useravatar:'',
match_avatar:'',
chats:[],
textInputValue:''
},
onReady() {
var that = this
//查询openid和match_openid所标识的唯一聊天室
chatroomCollection.where({
_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)),
match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid))
})
//绑定onChange，直观而言即表中该记录发生变动时，调用该函数
.watch({
onChange: this.onChange.bind(this),
onError(err) {
console.log(err)
}
})
},
//数据库表onchange绑定函数
onChange(e) {
let that = this
//type="init"的情况：初始化聊天窗口信息
if (e.type == "init") {
that.initchats(e.docs[0].records)
}
//type="update"的情况：records中增加了一条记录
else {
//在chats数组中增加该新消息
let i = that.data.chats.length
const new_chats = [...that.data.chats]
if (e.docs.length)
new_chats.push(e.docs[0].records[i])
this.setData({
chats: new_chats
})
}
},
initchats(records) {
this.setData({
chats: records
})
//跳转到页面底部
this.goBottom()
},
//获取输入文本
getContent(e) {
this.data.textInputValue = e.detail.value
},
sendMsg(){
let that = this
//show代表了数据库表中的showTime属性，是否显示消息时间
var show = false
//无记录时，true
if (this.data.chats.length == 0)
show = true
//判断上下两条消息的时间差决定是否显示时间，这里设置了2分钟：120000毫秒，可自行修改
else {
if (Date.now() - this.data.chats[this.data.chats.length - 1].sendTimeTS > 120000)
show = true
}
const _ = db.command
//消息空白处理
if (!that.data.textInputValue) {
wx.showToast({
title: '不能发送空白信息',
icon: 'none',
})
return
}
//消息内容赋值
const doc = {
openid: that.data.openid,
msgText: "text",
textContent: that.data.textInputValue,
sendTime: util.formatTime(new Date()),
sendTimeTS: Date.now(),
showTime: show,
}
//添加数据库表中该记录的records数组，并跳转页面到底部
chatroomCollection.where({
_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid)),
match_openid: _.or(_.eq(that.data.openid), _.eq(that.data.match_openid))
})
.update({
data: {
records: _.push(doc)
}
})
.then(res => {
that.goBottom()
})
//消息设空
that.setData({
textInputValue: ""
})
},
goBottom() {
wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {
if (rect) {
// 使页面滚动到底部
wx.pageScrollTo({
scrollTop: rect.height + 4
})
}
}).exec()
},
})
其中，util.js内容如下：
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime
}
一个简单的demo就完成了，大家有什么问题欢迎随时q我。
-----------完结撒花----------
强力驱动