第二篇，仿微信的语音电话，视频聊天IM聊天APP开发源码

计划实现的功能列表

1、发布消息撤回

2、消息内容可编辑

3、配置项目并实现IM登录

4、会话好友列表的实现

5、聊天输入框的实现

6、聊天界面容器的实现

7、聊天消息项的实现

8、聊天输入框扩展面板的实现

9、聊天会话管理的实现

10、聊天记录的加载与消息收发

11、定位SD配置与收发定位消息

12、贴图表情的定制化开发

13、群功能管理

14、集成音视频通话功能

15、集成仿微信的拍照，相册选择插件

16、集成美颜功能

17、集成TPNS消息推送

18、群功能相关设置

会话好友列表的实现

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)
}

有什么问题需求可以私聊我就行，欢迎大家一起学习交流。