微信小程序 云开发 聊天功能
2024-05-08 13:21:22
项目背景
。功能要求为：一对一聊天，可以发送文字，图片，语音，文件，视频，含消息列表页。 暑假没事干来写篇博客复盘一下。框架和样式部分就是采用了colorUI 的组件，没啥好说的，这方面我也不会
聊天室
成品展示
这是聊天内容部分
<scroll-view class="cu-chat" scroll-y="true" scroll-into-view="{{scrollId}}"
style="height:{{systemInfo.windowHeight - 50}}px;"enable-flex="true"><block wx:for="{{msgList}}" wx:key="index" wx:if="{{msgList!=[]}}"><view class="cu-chat"><!-- 我的部分 --><!-- 文字 --><block wx:if="{{item.creator == myOpenid && item.type == 'text'}}"><view class="cu-item self"><!-- 我的发送消息 --><view class="main"><view class="content bg-green shadow" id="msg-{{index}}"><text>{{item.content}}</text></view></view><!--我的头像 --><view class="cu-avatar radius" style="background-image:url({{myUserInfo.avaUrl}});"></view></view> </block><!-- 图片 --><block wx:if="{{item.creator == myOpenid && item.type == 'image'}}"><view class="cu-item self" id="msg-{{index}}"><view class="main" bindtap="viewImage" data-url="{{item.content}}"><image src="{{item.content}}" class="radius" mode="widthFix"></image></view><view class="cu-avatar radius" style="background-image:url({{myUserInfo.avaUrl}});"></view></view></block><!-- 视频 --><block wx:if="{{item.creator == myOpenid && item.type == 'video'}}"><view class="cu-item self" id="msg-{{index}}"><view class="main" bindtap="viewvideo" data-url="{{item.content}}"><video src="{{item.content}}" class="radius" mode="widthFix"></video></view><view class="cu-avatar radius" style="background-image:url({{myUserInfo.avaUrl}});"></view></view></block><!-- 文件 --><block wx:if="{{item.creator == myOpenid && item.type == 'file'}}"><view class="cu-item self" id="msg-{{index}}"><view class="main" bindtap="viewFile" data-fileid="{{item.content.fileID}}"><view class="content" style="width: 500rpx;height: 200rpx;display: flex;justify-content: space-around;padding-left:30rpx;padding-right:40rpx;padding-top:0rpx"><view class="fileName" style="margin-right: 30rpx;"><view class="view" style="font-size: 30rpx; font-weight: 20rpx;">{{item.content.fileName}}</view></view><!-- 文件图标 --><view class="image" ><image class="cu-avatar radius" style="background-image:url({{fileImg}});width:70rpx;height: 80rpx;"></image></view></view> </view><view class="cu-avatar radius" style="background-image:url({{myUserInfo.avaUrl}});"></view></view></block><!-- 语音 --><block wx:if="{{item.creator == myOpenid && item.type == 'voice'}}"><view class="cu-item self" id="msg-{{index}}"><view class="main" bindtap="voicePlay" data-voiceID="{{item.content.fileID}}"><view class="action text-bold text-grey">{{item.content.duration}}"</view><view class="content bg-green shadow"><text class="cuIcon-sound text-xxl padding-right-xl" > </text></view></view><!-- 头像 --><view class="cu-avatar radius" style="background-image:url({{myUserInfo.avaUrl}});"></view></view></block><!-- 他的部分 --><!-- 文字 --><block wx:if="{{item.creator !== myOpenid && item.type == 'text'}}"><view class="cu-item"><!-- 他的头像 --><view class="cu-avatar radius" style="background-image:url({{hisUserInfo}});"></view><!-- 他的消息 --><view class="main"><view class="content shadow" id="msg-{{index}}"><text>{{item.content}}</text></view></view></view></block><!-- 图片 --><block wx:if="{{item.creator !== myOpenid && item.type == 'image'}}"><view class="cu-item" id="msg-{{index}}"><!-- 他的头像 --><view class="cu-avatar radius" style="background-image:url({{hisUserInfo}});"></view><!-- 他的图片 --><view class="main" bindtap="viewImage" data-url="{{item.content}}"><image src="{{item.content}}" class="radius" mode="widthFix"></image></view></view></block><!-- 视频 --><block wx:if="{{item.creator !== myOpenid && item.type == 'video'}}"><view class="cu-item " id="msg-{{index}}"><!-- 他的头像 --><view class="cu-avatar radius" style="background-image:url({{hisUserInfo}});"></view><view class="main" bindtap="viewvideo" data-url="{{item.content}}"><video src="{{item.content}}" class="radius" mode="widthFix"></video></view></view></block><!-- 文件 --><block wx:if="{{item.creator !== myOpenid && item.type == 'file'}}"><view class="cu-item " id="msg-{{index}}"><!-- 他的头像 --><view class="cu-avatar radius" style="background-image:url({{hisUserInfo}});"></view><!-- 他的文件 --><view class="main"bindtap="viewFile" data-fileid="{{item.content.fileID}}"><view class="content" style="width: 500rpx;height: 200rpx;display: flex;justify-content: space-around;padding-left:30rpx;padding-right:40rpx;padding-top:0rpx"><view class="fileName" style="margin-right: 30rpx;"><view class="view" style="font-size: 30rpx; font-weight: 20rpx;">{{item.content.fileName}}</view></view><!-- 文件图标 --><view class="image" ><image class="cu-avatar radius" style="background-image:url({{fileImg}});width:70rpx;height: 80rpx;"></image></view></view> </view></view></block><!-- 语音 --><block wx:if="{{item.creator !== myOpenid && item.type == 'voice'}}"><view class="cu-item" id="msg-{{index}}"><!-- 他的头像 --><view class="cu-avatar radius" style="background-image:url({{hisUserInfo}});"></view><!-- 他的消息 --><view class="main"bindtap="voicePlay" data-voiceID="{{item.content.fileID}}"><view class="content shadow" ><text class="cuIcon-sound text-xxl padding-right-xl"></text></view><view class="action text-bold text-grey">{{item.content.duration}}"</view></view></view></block></view></block>
</scroll-view>浅浅地小讲一下
<scroll-view class="cu-chat" scroll-y="true" scroll-into-view="{{scrollId}}"
style="height:{{systemInfo.windowHeight - 50}}px;"enable-flex="true"></scroll-view>| scroll-into-view | string | 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 |
scrollId的值会在聊天内容发生变化时，变更为最后一条消息元素的id
msgList 是消息数组
集合chat_msg储存了聊天数据（部分），其中一条记录保存一个会话房间的数据，下面为一条记录的示例
| _id | 自动生成 | |||||||
| session_id | 代码中用了唯一确定会话房间的字段, 志愿者用户首次联系负责人时将在chat_msg创建会话房间记录，生成session_id字段，session_id由负责人和志愿者的_openid连接而成） | |||||||
| msg_set | 会话房间的消息数组，数组成员为对象类型，按消息类型分类 | 消息对象属性&消息类型 | 文字 | 图片 | 视频 | 文件 | 语音 | |
|---|---|---|---|---|---|---|---|---|
| type | text | image |
video |
file |
voice |
|||
| content | 文字消息 | 云ID | ||||||
| creator | 消息创建者的_openid | |||||||
| createTimeStamp | 消息发送时的时间戳 | |||||||
下面是图片、文件、语音消息的点击事件
//点击图片预览viewImage(e){var urls = [e.currentTarget.dataset.url]wx.previewImage({current: '', // 当前显示图片的http链接urls: urls, // 需要预览的图片http链接列表showmenu : true})},//打开文件viewFile(e){var fileid = e.currentTarget.dataset.fileid;//云文件fileIDvar that = this;wx.cloud.downloadFile({fileID: fileid,}).then((res)=>{console.log('res',res.tempFilePath);wx.openDocument({filePath: res.tempFilePath,showMenu: true,}).then(()=>{}).catch((err)=>{console.log('文件预览失败',err);})})},//播放录音（该页面的js文件中全局变量 有const innerAudioContext =wx.createInnerAudioContext();//播放语音）voicePlay(e){innerAudioContext.stop();innerAudioContext.src = '';console.log(e.currentTarget.dataset.voiceid)let id = e.currentTarget.dataset.voiceid;innerAudioContext.src = id;innerAudioContext.onPlay(()=>{console.log('语音播放')});innerAudioContext.onError((res)=>{console.log(res.errMsg) console.log(res.errCode)})innerAudioContext.play();},底部消息编辑区
<!-- 发送部分 -->
<view class="cu-bar foot input {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px"><!-- +更多 --><view class="action" bindtap="showModal"><text class="cuIcon-roundadd lg text-gray"></text></view><!-- text&voice --><view class="action" wx:if="{{inputMode == 'voice'}}" bindtap="switchInputMode"><text class="cuIcon-keyboard lg text-grey"></text></view><view class="action" wx:if="{{inputMode=='text'}}"bindtap="switchInputMode"><text class="cuIcon-sound text-grey"></text></view> <!-- 文字输入框 --><input hidden="{{inputMode=='voice'}}"class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10" value="{{inputContent}}" bindinput="onInputContent"></input><!-- 语音按住区 --><view hidden="{{inputMode=='text'}}"class="middle-view" bindtouchstart="RecordStart" catch:touchmove="RecordMove" bindtouchend="RecordEnd">{{voiceTip}}</view><!-- 发送按钮 --><button hidden="{{inputMode=='voice'}}"class="cu-btn bg-green shadow" bindtap="sendContent">发送</button>
</view><!-- 底部多选功能窗口 -->
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}"><view class="cu-dialog"><view class="cu-bar bg-white"><view class="action text-blue" bindtap="hideModal">取消</view></view><view class="padding-xl"><view class="cu-list grid col-3"><view class="cu-item" bindtap="sendPic"><text class="cuIcon-pic lg text-gray"></text><text>图片</text></view><view class="cu-item" bindtap="sendVideo"><text class="cuIcon-video lg text-gray"></text><text>视频</text></view><view class="cu-item" bindtap="sendFile"><text class="cuIcon-send lg text-gray"></text><text>文件</text></view></view></view></view>
</view>
<!-- 录音中的图样 -->
<view class="voice-tip" hidden="{{!recording}}"><view><image src="{{recordimg}}"></image></view><view>{{showtip}}</view>
</view>浅浅地小讲一下
inputMode这个变量用来表示当前的输入形式，如果是text显示文字输入框，如果是voice则显示语音输入框。bindtap="switchInputMode"这个点击事件用来切换输入方式。
发送的消息都会包装成msg对象作为对应云函数（lyc_consult -- sendMsg ）的参数，经由云函数处理，写入数据库集合的对应记录中，其中文字和图片消息还会经过合法性检验。通过监听对应会话记录达到实时聊天。
实时聊天实现
onLoad:async function (e) {loading=true;if(msgWatcher) await msgWatcher.close();console.log('进入会话页，携带会话号',e.session_id);console.log("hisUserInfo",e.hisUserInfo);this.data.sid = e.session_id;this.setData({hisUserInfo: e.hisUserInfo,myUserInfo:App.globalData.userInfo.userInfo,})var that=this;//获取系统信息，得到可用窗口高度wx.getSystemInfo({success: function (res) {that.setData({systemInfo: res,})}})//开启集合chat_msg.session_id的消息监听setTimeout(this.initWatcher,1000)//初始化录音器this.initRecord();},//消息监听器开启async initWatcher(){wx.showLoading({title: '加载中...',mask: true,})console.log('initWatcher函数执行，消息监听器开启'); msgWatcher = await db.collection('chat_msg').where({session_id : this.data.sid,}).watch({onChange:this.onChange.bind(this),onError:function(err){console.log("onError",err);wx.showModal({title: '提示',content: '数据监听失败',showCancel:false,confirmText:'重新加载',success (res) {if (res.confirm) {that.onLoad();} }})}})},//消息监听回调函数onChange(snapshot){console.log('onChange监听回调函数的snapshot',snapshot)//即时聊天this.sortRenderMsg(snapshot.docs[0].msg_set)},//对消息对象数组进行时间排序并渲染async sortRenderMsg(e){console.log('排序渲染函数执行');var list=e.sort(function(a,b){return a.createTimeStamp-b.createTimeStamp});await this.setData({msgList : list,scrollId: 'msg-'+(list.length-1)});if(loading==true){wx.hideLoading({complete: () => {loading=false},})}},消息列表页
当会话房间有为读消息时，会有红点提示，且红点内数字即为未读消息条数。
由于只能志愿者主动去联系负责人，从而达到新开会话房间的行为，所以不必考虑有新的会话进来这种情况，只用监听已有的会话记录，负责人端则既需要考虑监听已有的会话房间，还要考虑监听负责人的会话房间数组的更新情况，及时显示首次来联系的志愿者消息。
//监听我的所有项目会话（是否有项目负责人发来新消息）watch() {console.log('开启消息列表页的会话监听');var arr = sids;var that = this;watcher = db.collection('chat_msg').where({session_id: _.in(arr),}).watch({onChange: this.onChange.bind(this),onError: function (err) {console.log("onError", err);if(loading==false){wx.hideLoading({complete: () => {loading=true},})}wx.showModal({title: '提示',content: '数据监听失败',showCancel:false,confirmText:'重新加载',success (res) {if (res.confirm) {that.onShow();} }})}})},//监听回调函数onChange(snapshot) {console.log('消息列表页监听回调函数的snapshot', snapshot);const sessions = this.data.sessions;snapshot.docChanges.forEach(update);//对发生改变的会话记录进行了遍历function update(e) {const sid = e.doc.session_id;const index = sids.indexOf(sid);const msg_set = e.doc.msg_set;const len = msg_set.length;//如果该会话无任何消息，则跳出if (len == 0) return;const lastMsgTime = msg_set[len - 1].createTimeStamp;const leaveTimeStamp = sessions[index].leaveTimeST;let unReadNum = 0;if ((lastMsgTime > leaveTimeStamp) || (lastMsgTime == leaveTimeStamp)) {if (lastMsgTime == leaveTimeStamp) { unReadNum = 1; }if (lastMsgTime > leaveTimeStamp) {unReadNum = function () {let sum = 0;for (let x = len - 1 ; (msg_set[x].createTimeStamp > leaveTimeStamp) || (msg_set[x].createTimeStamp == leaveTimeStamp); --x) {++sum;}console.log('sum',sum)return sum;}();}db.collection('all_user').where({_openid: myOpenid,'mySession_ids.session_id': sid}).update({data: {'mySession_ids.$.unReadNum': parseInt(unReadNum)}})console.log('unReadNum',unReadNum)}else {console.log('会话' + sid + '无新消息');}}let that = this;setTimeout(f, 100)async function f() {await db.collection('all_user').where({_openid: myOpenid}).get().then((res) => {if (res.data.length) {that.setData({sessions: res.data[0].mySession_ids,});console.log('列表页渲染完成');}})if(loading==false){wx.hideLoading({complete: () => {loading=true},})}}},开摆 这里是源码 https://gitee.com/YYCCbigbig/applet-chat-function.git
有用的话，点个赞吧
微信小程序 云开发 聊天功能相关推荐
- 微信小程序云开发——常用功能2：操作云数据库一键批量导入数据（导入json文件）
微信小程序云开发--常用功能2:操作云数据库一键批量导入数据(导入json文件) 今天我们要添加100条数据.下面的过程是先创建一条记录,然后导出这条数据看json文件中是如何编辑字段的,然后仿照这个 ...
- 微信小程序云开发---发送邮件功能
email/index.js 云函数 const cloud = require('wx-server-sdk') cloud.init() //引入发送邮件的类库,npm i nodemailer ...
- 微信小程序·云开发，采坑第一趴
operateWXData:fail invalid scope 微信开发者工具 v1.02.1809111 的版本更新了微信小程序·云开发的功能: 这次更新弱化了后端开发!!???具体看微信的更新文 ...
- 怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 [微 ...
- 微信小程序云开发CMS中WebHook功能的使用方法
微信小程序云开发CMS中WebHook功能的使用方法 官方文档 Webhook 是什么呢,翻译过来就是网页钩子.它的用处是,当我们在CMS进行增添查改的操作后,会自动回调webhook函数,我们就可以 ...
- 【微信小程序云开发】使用云函数（node.js）实现多张图片转成pdf的功能，且pdf带水印
最近在做项目的时候,碰到一个功能需要多张图片转成pdf的功能,首先,在网上找了很多资料,都没有一个合适的. 后来,就自己动手使用云函数写了一个处理图片转成pdf的云函数,而且需带水印. 直奔主题,使用 ...
- 微信小程序云开发实现退款功能
微信小程序云开发实现退款功能 官方文档 小程序云开发实现微信支付 官方文档非常的简单,也没有示例代码,只是列出了许多需要的参数,对于新手来说会可能有点迷糊.可以我的步骤跟着一步一步来. 一.获取退款A ...
- 微信小程序云开发---vant组件 van-uploader 实现视频文件上传到云存储，发动态功能
pages/upVideo.wxml //获取用户的头像和昵称展示 <view class="headerBox"><image src="{{user ...
- 微信小程序云开发-树洞小程序Treehole（介绍）
记录一款基于云开发的微信小程序. 树洞,顾名思义是作为匿名吐槽的平台,主要功能可以参照微信朋友圈的形式,不过采取的是匿名的方式. 主要基于微信小程序云开发,前端个人主页页面的界面使用的是ColorUi ...
最新文章
- Linux7 CENTOS7修改root密码
- 论文中键入行内公式导致行间距变大的解决方案
- Python基础知识点总结
- IoC组件Unity再续~根据类型字符串动态生产对象
- VGG模型构建与实现
- 求解组合问题的一个迭代算法
- mpeg4视频中，I帧、p帧、B帧的判定
- 【java笔记】IO流（1）：IO流概述，字节输出/输入流读写文件
- jsp实验管理系统开题报告_MR教育燧光与广东实验中学关于MR化学课程开题报告研讨会顺利完成...
- 【ML小结2】信息论
- PIC16F887 实战编程 单片机编程 基础实验教程
- Ubuntu安装Jenkins
- 【数字信号去噪】基于matlab小波变换地震波去噪【含Matlab源码 1954期】
- 2021年图扑软件重点事件回顾
- Mac上的GIF制作软件推荐
- IE 浏览器阻止打印页面的方法
- 腾讯im及时登录注册
- ios::exceptions()函数
- 洛谷P3386：网络流之二分图匹配，最大流算法
- FreeNAS 0.72 安装 mldonkey 3.0.6