文章概述

这曾经是第四篇了，昨天咱们代码总算开了个头，明天咱们来开始缓缓实现 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)
}

我的项目开源地址及交换群

我的项目成品成果查看：请点击我的项目引言
我的项目开源地址：https://gitee.com/ckong/Zhimi…
Uniapp 开发交换群：755910061