会话好友列表的实现

1、项目引言
2、腾讯云后台配置TXIM
3、配置项目并实现IM登录
4、会话好友列表的实现
5、聊天输入框的实现
6、聊天界面容器的实现
7、聊天消息项的实现
8、聊天输入框扩展面板的实现
9、聊天会话管理的实现
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照，相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)

文章目录

会话好友列表的实现
文章概述
聊天消息项的实现
- 1.收发聊天消息
- - 1.1 接收聊天消息
  - 1.2 发送聊天消息
- 2.聊天消息格式化
- 3.聊天消息回显
- 4.聊天消息弹出菜单
项目开源地址及交流群

文章概述

整个IM项目的关键点来了,本文将讨论一下聊天消息的实现，如何收发消息并且实现聊天消息的UI显示。

聊天消息项的实现

1.收发聊天消息

1.1 接收聊天消息

接收聊天消息显得很简单，在之前的会话列表实现中已经做过一次，这次我们代码其实差不多，唯一不一样的是接受后我们需要做筛选确定需要回显到聊天消息界面的项目。
绑定消息事件部分的代码如下：

// 这里选择在onLoad绑定，确定不会漏接数据
async onLoad (params) {// 做好一个变量确定我现在在和谁聊天this.receiver = params.receiver// 监听新的消息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 V2TIMMessageManager = this.$txim.getMessageManager()let senderId = data?.sender?.userID || data?.senderif (senderId == this.receiver) {this.HistoryMessageToChatLog([data])this.$txim.markC2CMessageAsRead(senderId)await this.$nextTick()this.$refs.chatLayout.scrollToBottom()}},

1.2 发送聊天消息

发送聊天消息实际上demo已经有所封装了，对于文本消息而言发送的代码如下：

// 发送文字 这里需要防抖处理，反正多次点击发送按钮从而出现问题
sendText: _.debounce(async function (text) {let V2TIMMessageManager = this.$txim.getMessageManager()// 创建消息结构体let v2TIMMessage = V2TIMMessageManager.createTextMessage(text)try {// 发送消息let ret = await V2TIMMessageManager.sendMessage(v2TIMMessage, this.receiver)// 更新聊天消息this.HistoryMessageToChatLog([ret.data])} catch (e) {this.$utils.toast('发送失败')}await this.$nextTick()// 保持滚动到底部this.$refs.chatLayout.scrollToBottom()
}, 500, { leading: true, trailing: false }),

上面演示的是文本消息，而对于其他消息而言，只是创建的消息结构体不一样，各种消息的结构体如下

// 文本
let v2TIMMessage = V2TIMMessageManager.createTextMessage(text)
// 大表情
let v2TIMMessage = V2TIMMessageManager.createFaceMessage(0, { faceUrl: url })
// 图片
let v2TIMMessage = V2TIMMessageManager.createImageMessage(filePath)
// 视频
let v2TIMMessage = V2TIMMessageManager.createVideoMessage(filePath, 'mp4', timeLen, snapshotPath)
// 语音
let v2TIMMessage = V2TIMMessageManager.createSoundMessage(filePath, timeLen)
// 定位
let v2TIMMessage = V2TIMMessageManager.createLocationMessage(address, longitude, latitude)

2.聊天消息格式化

为了做好组件之间的解耦合，我们需要将腾讯消息的结构体进行格式化，映射为我们消息组件中能识别的结构体，映射部分的代码实际上utils/imUtils文件中已经有所提供了，具体的操作如下（这里需要注意，里面根据了消息记录的elemType做了判断，elemType腾讯TXIM的官方文档对应这里https://im.sdk.qcloud.com/doc/zh-cn/classcom_1_1tencent_1_1imsdk_1_1v2_1_1V2TIMMessageManager.html）

async HistoryMessageToChatLog (msgLogs, unshift) {for (let item of msgLogs) {let msgType = [null,this.$imUtils.MSG_TEXT,null,this.$imUtils.MSG_IMAGE,this.$imUtils.MSG_AUDIO,this.$imUtils.MSG_VIDEO,null,this.$imUtils.MSG_LOCATION,this.$imUtils.MSG_TIP_FACE,][item.elemType]let dataJson = {id: item.msgID,head: '../static/icon_u_head.jpg',self: item.isSelf,type: msgType,data: null}switch (msgType) {case this.$imUtils.MSG_TEXT:dataJson.data = this.$imUtils.buildMessageItem(msgType, item.elem.text, item)breakcase this.$imUtils.MSG_LOCATION:dataJson.data = this.$imUtils.buildMessageItem(msgType, item, item.elem.latitude, item.elem.longitude, item.elem.desc, item)breakcase this.$imUtils.MSG_IMAGE:dataJson.data = this.$imUtils.buildMessageItem(msgType, item.elem.imageList[0].url, item)breakcase this.$imUtils.MSG_AUDIO:dataJson.data = this.$imUtils.buildMessageItem(msgType, '', item.elem.duration * 1000, item)breakcase this.$imUtils.MSG_VIDEO:dataJson.data = this.$imUtils.buildMessageItem(msgType, item, item)breakcase this.$imUtils.MSG_TIP_FACE:dataJson.data = this.$imUtils.buildMessageItem(msgType, item, item)breakdefault:// console.log(item)}if (msgType) {this.chatLogs[unshift ? 'unshift' : 'push'](dataJson)}}
}

3.聊天消息回显

聊天消息部分demo已经内置了一个聊天组件，我们可以实现开箱即用，只需要引入组件定义好list即可
首先我们需要引入组件，并且在template对应的位置写好即可

<chat-message-itemv-for="item in chatLogs":ref="item.id":self="item.self":head="item.head":type="item.type":data="item.data":prevent="currentPopItem && currentPopItem.item.id == item.id"@longpressContent="currentPopItem = { ref: $refs[item.id][0], item }"
>
</chat-message-item>

<script>
import ChatMessageItem from '../components/ChatMessageItem'
export default {components: { ChatMessageItem },
}
</script>

4.聊天消息弹出菜单

一般而言我们聊天消息还需要有一些操作，比如删除，转发之类的，那么我们也需要为聊天消息增加弹出菜单，这需要我们去做浮动位置的计算，然而demo中已经提供了一个弹出菜单，使得我们可以很简单的实现这个功能。

聊天消息的弹出菜单组件在componetns/ChatMsgItemProp下，开发者需要自己修改成为自己需要的功能，这里我们先引入组件然后加入到template中对应位置

<chat-layoutclass="page"ref="chatLayout":end="end"@upperLoading="loadMoreLog"@scroll="onChatLayoutScroll"@clickRoot="onRootClick"
><chat-message-itemv-for="item in chatLogs":ref="item.id":self="item.self":head="item.head":type="item.type":data="item.data":prevent="currentPopItem && currentPopItem.item.id == item.id"@longpressContent="currentPopItem = { ref: $refs[item.id][0], item }"></chat-message-item><!-- 这里要明显注意，弹出不是在ChatMessageItem里面的！ --><chat-msg-item-pop:show="currentPopItem"@clickFn="onPopClickFn($event)"></chat-msg-item-pop>
</chat-layout>

这里我们主要是从chatMessageItem中获取到了长按事件的坐标信息，然后交给chatMsgItemPop，弹出组件会根据坐标计算确定显示位置和方向，计算部分的算法如下：

calcPopPosition () {let { ref } = this.showlet el = ref.$ellet pop = this.$refs.poplet content = el.children[2]dom.getComponentRect(pop, ({ size }) => {let popSize = sizedom.getComponentRect(content, ({ size }) => {let contentSize = sizethis.popPoint.reverse = (contentSize.top - popSize.height) < 0this.popPoint.popHeight = popSize.heightthis.popPoint.itemHeight = contentSize.heightthis.popPoint.touchX = contentSize.left + contentSize.width / 2this.popPoint.touchY = contentSize.top})})
}

通过计算确定了显示位置之后就会显示功能菜单列表，在组件中内置了以下的按钮图标，功能暂未实现，开发者可以自己根据实际需要定制化处理哦。

 { type: 'copy', label: '复制', icon: '/static/icon_copy.png' },{ type: 'share', label: '转发', icon: '/static/icon_share.png' },{ type: 'collect', label: '收藏', icon: '/static/icon_collect.png' },{ type: 'delete', label: '删除', icon: '/static/icon_delete.png' },{ type: 'ref', label: '引用', icon: '/static/icon_ref_msg.png' },{ type: 'translate', label: '翻译', icon: '/static/icon_fanyi.png' },{ type: 'search', label: '搜一搜', icon: '/static/icon_search_fun.png' },

项目开源地址及交流群

项目成品效果查看：请点击项目引言
项目开源地址：https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue
Uniapp开发交流群：755910061

七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天消息项的实现相关推荐

音视频开发系列（17）文章分享-提速 30%腾讯TQUIC 网络传输协议
作者:腾讯 sTGW-TQUIC 腾讯sTGW如何助力核心业务用户登录耗时降低30%,下载场景500ms内请求成功率从HTTPS的60%提升到90%,移动端APP在弱网.跨网场景下同样取得媲美正常网络 ...
即时通讯音视频开发（七）：音频基础及编码原理入门
前言即时通讯应用中的实时音视频技术,几乎是IM开发中的最后一道高墙.原因在于:实时音视频技术 = 音视频处理技术 + 网络传输技术的横向技术应用集合体,而公共互联网不是为了实时通信设计的. 系列文 ...
iOS音视频开发七：视频采集
将通过拆解采集 → 编码 → 封装 → 解封装 → 解码 → 渲染流程并实现 Demo 来向大家介绍如何在 iOS/Android 平台上手音视频开发. 这里是第七篇:iOS 视频采集 Demo.这个 ...
Android音视频开发基础（七）：视频采集-系统API基础
前言在Android音视频开发中,网上知识点过于零碎,自学起来难度非常大,不过音视频大牛Jhuster提出了<Android 音视频从入门到提高 - 任务列表>.本文是Android音视 ...
已拿字节、腾讯、墨墨 offer，音视频开发进阶指南pdf
背了多少单词 (更慌了,随口说100个左右) 怎么知道有墨墨这个app的 (同学介绍) 你简历说你自己心思缜密,但是你简历上的句子的标点符号有问题啊.(emmm) 项目的UI问题技术 : JavaS ...
【微信小程序控制硬件16 】安信可 ESP32-S 开发板实现移植腾讯物联开发平台蓝牙 llsync 协议，实现一键蓝牙快速配网+远程控制。（附带源码）
文章目录一.前言二.源码目录说明三.编译指导四.常见问题五.开源微信物联网控制一览表另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物联 ...
Android基于腾讯云实时音视频实现类似微信视频通话最小化悬浮
最近项目中有需要语音.视频通话需求,看到这个像环信.融云等SDK都有具体Demo实现,但咋的领导对腾讯情有独钟啊,IM要用腾讯云IM,不妙的是腾讯云IM并不包含有音视频通话都要自己实现,没办法深入了解 ...
Vue实现功能齐全的地图组件 - 附效果图及源码
这是一个h5页面– 效果图录图的时候网络条件不是很好,wifi卡了,所以数据加载有点慢.当网络情况不好的时候,这个组件还需要进一步的优化前置条件在你的index.html页面上加载百度地图js( ...
最新UI仿水滴筹系统源码+全开源Uniapp开发的
正文: 朋友是做开发的,所以分享过来的都是企业级别的项目源码,这套是uniapp+fastadmin开发的源码,非常人性化,可以随意二开,有兴趣的自行去体验吧. 程序: wwhjxs.lanzouv. ...

七、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天消息项的实现