七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天消息项的实现

会话好友列表的实现

1、项目引言
2、腾讯云后台配置TXIM
3、配置项目并实现IM登录
4、会话好友列表的实现
5、聊天输入框的实现
6、聊天界面容器的实现
7、聊天消息项的实现
8、聊天输入框扩展面板的实现
9、聊天会话管理的实现
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照，相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)

---

---

文章概述

整个IM项目的关键点来了,本文将讨论一下聊天消息的实现，如何收发消息并且实现聊天消息的UI显示。

---

聊天消息项的实现

1.收发聊天消息

1.1 接收聊天消息

接收聊天消息显得很简单，在之前的会话列表实现中已经做过一次，这次我们代码其实差不多，唯一不一样的是接受后我们需要做筛选确定需要回显到聊天消息界面的项目。
绑定消息事件部分的代码如下：

// 这里选择在onLoad绑定，确定不会漏接数据
async onLoad (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)
}

接收到消息的回调事件处理如下

 // 获取消息
 async onRecvMessageHanlder ({
     data }) {
   
   let V2TIMMessageManager = this.$txim.getMessageManager()
   let senderId = data?.sender?.userID || data?.sender
   if (senderId == this.receiver) {
   
     this.HistoryMessageToChatLog([data])
     this.$txim.markC2CMessageAsRead(senderId)
     await this.$nextTick()
     this.$refs.chatLayout.scrollToBottom()
   }
 },

1.2 发送聊天消息

发送聊天消息实际上demo已经有所封装了，对于文本消息而言发送的代码如下：

// 发送文字 这里需要防抖处理，反正多次点击发送按钮从而出现问题
sendText: _.debounce(async function (text)