7.uniapp+vue+腾讯IM+腾讯音视频开发仿微信IM，支持各种消息收发，音视频通话，用vue源码-聊天消息项的实现

文章总结重点整个IM项目，本文将讨论聊天消息的实现，如何收发消息，实现聊天消息的UI显示。聊天消息项的实现1.发送和接收聊天消息1.1接收聊天消息接收聊天消息非常简单。在之前的sessionlist实现中已经做过一次。这次我们的代码其实差不多。唯一不同的是，我们需要在接受之后去做。筛选确定需要回显到聊天消息界面的项目。绑定消息事件部分的代码如下：//这里选择绑定onLoad，确保数据不会丢失asynconLoad(params){//做一个变量，判断我现在和谁聊天。this.receiver=params.receiver//监听新消息this.$txim.$on('onRecvC2CTextMessage',this.onRecvMessageHanlder)this.$txim.$on('onRecvC2CCustomMessage',this.onRecvMessageHanlder)this.$txim.$on('onRecvGroupTextMessage',this.onRecvMessageHanlder)this.$txim.$on('onRecvGroupCustomMessage',this.onRecvMessageHanlder)this.$txim.$on('onRecvNewMessage',this.onRecvMessageHanlder)}接收回调事件处理消息如下//获取消息asynconRecvMessageHanlder({data}){letV2TIMMessageManager=this.$txim.getMessageManager()letsenderId=data?.sender?.userID||data?.senderif(senderId==this.receiver){this.HistoryMessageToChatLog([data])this.$txim.markC2CMessageAsRead(senderId)awaitthis.$nextTick()this.$refs.chatLayout.scrollToBottom()}},1.2发送聊天消息发送聊天消息其实在demo中已经封装好了，对于短信发送代码如下：//发送文字需要进行防抖处理，反正多次点击发送按钮会出问题sendText:_.去抖动（异步功能tion(text){letV2TIMMessageManager=this.$txim.getMessageManager()//创建消息结构letv2TIMMessage=V2TIMMessageManager.createTextMessage(text)try{//发送消息letret=awaitV2TIMMessageManager.sendMessage(v2TIMMessage,this.receiver)//更新聊天消息this.HistoryMessageToChatLog([ret.data])}catch(e){this.$utils.toast('Failedtosend')}awaitthis.$nextTick()//继续滚动到底部这。$refs.chatLayout.scrollToBottom()},500,{leading:true,trailing:false}),上面演示的是文本消息，其他消息只是创建的消息结构不同。结构如下//文字letv2TIMMessageManager.createTextMessage(text)//大表情letv2TIMMessage=V2TIMMessageManager.createFaceMessage(0,{faceUrl:url})//图片letv2TIMMessage=V2TIMMessageManager.createImageMes??sage(filePath)//Videoletv2TIMMessage=V2TIMMessageManager.createVideoMessage(filePath,'mp4',timeLen,snapshotPath)//voiceletv2TIMMessage=V2TIMMessageManager.createSoundMessage(filePath,timeLen)//locationletv2TIMMessage=V2TIMMessageManager.createLocationMessage(address,longitude,latitude)2.聊天消息格式化为了做好组件间的解耦，我们需要对腾讯消息的结构进行格式化，映射到我们消息组件中可以识别的结构。映射部分的代码其实在utils/imUtils文件中已经提供了，具体操作如下（这里注意，是根据消息记录的elemType判断的，elemType腾讯TXIM官方文档对应https://im.sdk.qcloud.com/doc/zh-cn/classcom_1_1tencent_1_1imsdk_1_1v2_1_1V2TIMMessageManager.html)asyncHistoryMessageToChatLog(msgLogs,unshift){for(letitemofmsgLogs){letmsgType=[null,this.$imUtils.MSG_TEXT.this,null,$imUtils.MSG_IMAGE,this.$imUtils.MSG_AUDIO,this.$imUtils.MSG_VIDEO,null,this.$imUtils.MSG_LOCATION,this.$imUtils.MSG_TIP_FACE,][item.elemType]让dataJson={id:item.msgID,head:'../static/icon_u_head.jpg',self:item.isSelf,type:msgType,data:null}switch(msgType){casethis.$imUtils.MSG_TEXT:dataJson.data=复制代码这个.$imUtils。buildMessageItem(msgType,item.elem.text,item)中断案例this.$imUtils.MSG_LOCATION:dataJson.data=this.$imUtils.buildMessageItem(msgType,item,item.elem.latitude,item.elem.longitude,item.elem.desc,item)中断案例this.$imUtils.MSG_IMAGE:dataJson.data=this.$imUtils.buildMessageItem(msgType,item.elem.imageList[0].url,item)中断案例this.$imUtils.MSG_AUDIO:dataJson.data=this.$imUtils.buildMessageItem(msgType,'',item.elem.duration*1000,item)中断案例this.$imUtils.MSG_VIDEO:dataJson.data=this.$imUtils.buildMessageItem(msgType,item,item)中断案例this.$imUtils.MSG_TIP_FACE:dataJson.data=this.$imUtils.buildMessageItem(msgType,item,item)breakdefault://console.log(item)}if(msgType){this.chatLogs[unshift?'unshift':'push'](dataJson)}}}3.聊天消息回显聊天消息部分demo内置了聊天组件，我们可以开箱即用，只需要导入该组件定义list首先我们需要导入组件，并写在模板的相应位置4.聊天消息弹出菜单一般来说，我们的聊天消息还是需要一些操作的，比如删除，转发等，那么我们还需要为聊天消息添加一个弹出菜单，这就需要我们计算浮动位置，但是demo中已经提供了弹出菜单，方便我们实现这个功能聊天消息的弹出菜单组件在componetns/ChatMsgItemProp下。开发者需要对其进行修改，使其成为自己需要的功能。这里我们先引入组件，然后将其添加到模板中相应的位置。这里我们主要是从chatMessageItem在中获取长按事件的坐标信息，然后交给chatMsgItemPop。弹出组件会根据坐标计算确定显示位置和方向。计算部分的算法如下：calcPopPosition(){let{ref}=this.showletel=ref.$elletpop=this.$refs.popletcontent=el.children[2]dom.getComponentRect(pop,({size})=>{让popSize=sizedom.getComponentRect(content,({size})=>{让contentSize=sizethis.popPoint.reverse=(contentSize.top-popSize.height)<0this.popPoint.popHeight=popSize.heightthis.popPoint.itemHeight=contentSize.heightthis.popPoint.touchX=contentSize.left+contentSize.width/2this.popPoint.touchY=contentSize.top})})}通过计算确定显示位置后，显示功能菜单列表。组件中内置了以下按钮图标。该功能暂未实现，开发者可根据实际需要进行定制。{type:'copy',label:'copy',icon:'/static/icon_copy.png'},{type:'share',label:'forward',icon:'/static/icon_share.png'},{type:'collect',label:'collection',icon:'/static/icon_collect.png'},{type:'delete',label:'delete',icon:'/static/icon_delete.png'},{type:'ref',label:'reference',icon:'/static/icon_ref_msg.png'},{type:'translate',label:'translation',icon:'/static/icon_fanyi.png'},{type:'search',label:'search',icon:'/static/icon_search_fun.png'}，项目开源地址及交流群项目成品效果：请点击项目介绍项目开源地址：https://gitee.com/ckong/Zhimi...Uniapp开发交流群：755910061