四、Uniapp+vue+腾讯IM+腾讯音视频开发聊天APP，支持消息收发，音视频通话（附开源源码）-会话好友列表的实现四、Uniapp+vue+腾讯IM+腾讯音视频

文章概述
这已经是第四篇了，昨天我们代码总算开了个头，今天我们来开始慢慢实现IM中需要的各个模块，今天我们来实现会话好友列表的显示，话不多说，直接开撸。
会话好友列表的实现
1.监听回调事件在开发中，我们可以通过监听回调事件的方式被动获取会话变更，以及通过api主动获取会话缓存数据，主动获取的是sdk底层缓存的会话列表数据，而回调的则是最新的，一般而言回调的时效性高于api。
主动获取会话列表：

getConversationList () { let{ data } = await this.$txim.getConversationList(this.nextSeq, 999) this.nextSeq = data.nextSeq data.conversationList = data.conversationList || data.conversations let conversationList = data.conversationList.sort((a,b) => b.lastMessage.timestamp - a.lastMessage.timestamp) this.conversationList = conversationList }

监听会话消息变更:

// 初始化会话列表并且监听会话列表变化 this.$txim.$on('onNewConversation', this.onConversationHandler) this.$txim.$on('onConversationChanged', this.onConversationHandler)

回调事件处理：

async onConversationHandler ({ data }) { // 这里的data是会话变更的列表，需要判断是新增还是变更（通过item.conversationID判断） for (let item of data) { let index = this.conversationList.findIndex(R => R.conversationID === item.conversationID) if (index >= 0) { this.conversationList.splice(index, 1, item) } else { this.conversationList.push(item) } } },

2.同步刷新已读
一般而言我们是在接收到数据的时候进行已读标记，因此我们需要监听消息事件，判断是否当前聊天人员从而刷新已读
事件监听：

// 监听新的消息 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 isC2C = !!(data.sender.userID || data.sender) let sender = data.sender.userID || data.sender.groupID if (this.currentChatId == sender) { isC2C ? this.$txim.markC2CMessageAsRead(sender) : this.$txim.markGroupMessageAsRead(sender) } }

3.删除会话消息
有显示有新增，那也就对应的有删除本地会话消息，删除本地会话消息我们要注意一点，删除之后只是本地聊天消息消失，云端依然存在，开发者可以自行在腾讯云后台配置历史记录天数。

doDeleteItem (item) { // 这里的item是通过界面回调的 let index = this.conversationList.findIndex(R => R.conversationID == item.conversationID) this.$txim.deleteConversation(item.conversationID) this.conversationList.splice(index, 1) }

项目开源地址及交流群
【四、Uniapp+vue+腾讯IM+腾讯音视频开发聊天APP，支持消息收发，音视频通话（附开源源码）-会话好友列表的实现】项目成品效果查看：请点击项目引言
项目开源地址：https://gitee.com/ckong/Zhimi...
Uniapp开发交流群：755910061