會話好友列表的實現

1、專案引言
2、騰訊雲後臺配置TXIM
3、配置專案並實現IM登入
4、會話好友列表的實現
5、聊天輸入框的實現
6、聊天介面容器的實現
7、聊天訊息項的實現
8、聊天輸入框擴充套件面板的實現
9、聊天會話管理的實現
10、聊天記錄的載入與訊息收發
11、定位SD配置與收發定位訊息
12、貼圖表情的定製化開發
13、騰訊雲後臺配置TRTC功能
14、整合音視訊通話功能
15、整合仿微信的拍照，相簿選擇外掛
16、整合美顏功能
17、整合TPNS訊息推送(暫未接入)

@

• 會話好友列表的實現
• 文章概述
• 會話好友列表的實現
  • 1.監聽回撥事件
  • 2.同步重新整理已讀
  • 3.刪除會話訊息
• 專案開源地址及交流群

文章概述

這已經是第四篇了，昨天我們程式碼總算開了個頭，今天我們來開始慢慢實現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.OpenSource.UniApp.TXIM.Vue
Uniapp開發交流群：755910061