四、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中需要的各个模块,今天我们来实现会话好友列表的显示,话不多说,直接开撸。
会话好友列表的实现
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
四、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-会话好友列表的实现的更多相关文章
- 五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- 一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-腾讯云后台配置TXIM
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-配置项目并实现IM登录
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- 七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天消息项的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
- 八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-聊天输入框扩展面板的实现
聊天输入框扩展面板的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入 ...
- Android IOS WebRTC 音视频开发总结(四七)-- 深度解读国内首届WebRTC大会背后的真相
本文主要解读国内首届WebRTC大会背后的真相,文章来自博客园RTC.Blacker,支持原创,转载必须说明出处,更多详见www.rtc.help -------------------------- ...
- Android WebRTC 音视频开发总结(四)-- webrtc传输模块
在介绍WebRTC通讯之前我们先来看一个P2P视频聊天包括的主要过程,转载请说明出处(博客园RTC.Blacker): 音视频数据采集->编码->发送->接收->解码-> ...
- Qt中事件处理的方法(三种处理方法,四种覆盖event函数,notify函数,event过滤,事件处理器。然后继续传递给父窗口。可观察QWidget::event的源码,它是虚拟保护函数,可改写)
一.Qt中事件处理的方式 1.事件处理模式一 首先是事件源产生事件,最后是事件处理器对这些事件进行处理.然而也许大家会问, Qt中有这么多类的事件,我们怎么样比较简便的处理每个事件呢?设想,如果是 ...
随机推荐
- 题解 P5320 - [BJOI2019]勘破神机(推式子+第一类斯特林数)
洛谷题面传送门 神仙题(为什么就没能自己想出来呢/zk/zk) 这是我 AC 的第 \(2\times 10^3\) 道题哦 首先考虑 \(m=2\) 的情况,我们首先可以想到一个非常 trivial ...
- Go知识点大纲
目录 1. 基本介绍 2. 安装及配置 3. 变量 4. 常量 5. 数据类型 5.1 numeric(数字) 5.2 string(字符串) 5.3 array(数组) 5.4 slice(切片) ...
- linux 线程函数小结
由于主线程已经开始跑了,次线程还在使用串口打印需要一点时间,因此打印的都是重复的. #include "pthread.h" #include "stdio.h" ...
- C#数据库连接方式【简版】
using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing;using ...
- 一站式Flink&Spark平台解决方案——StreamX
大家好,我是独孤风.今天为大家推荐的是一个完全开源的项目StreamX.该项目的发起者Ben也是我的好朋友. ****什么是StreamX,StreamX 是Flink & Spark极速开发 ...
- Spark(一)【spark-3.0安装和入门】
目录 一.Windows安装 1.安装 2.使用 二.Linux安装 Local模式 1.安装 2.使用 yarn模式 1.安装 2.使用 3.spark的历史服务器集成yarn 一.Windows安 ...
- nodejs-Path模块
JavaScript 标准参考教程(alpha) 草稿二:Node.js Path模块 GitHub TOP Path模块 来自<JavaScript 标准参考教程(alpha)>,by ...
- How exactly does Google AdWords work?
The key to how Google AdWords works is the Quality Score. Quality Score is generally how well an ad ...
- Servlet(1):Servlet介绍
一. Servlet介绍 Servlet 是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生 ...
- 渐进式web应用 (PWA)
PWA(渐进式 Web 应用)运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序. PWA的特点: Discoverable, 内容可以通过搜索引擎发现. Instal ...