当前位置: 首页 > Web前端 > vue.js

第二部分,类微信语音电话,视频聊天IM聊天APP开发源码

时间:2023-04-01 00:47:22 vue.js

计划中的功能列表1.发布消息撤回2.消息内容可编辑3.配置项目并实现IM登录4.对话好友列表实现5.聊天输入框的实现6.聊天界面容器的实现7.聊天消息项的实现8.聊天输入框扩展面板的实现9.聊天会话管理的实现10.加载聊天记录和消息收发11.定位SD配置及收发定位消息12、贴纸表情自定义开发13、群组功能管理14、集成音视频通话功能15、集成类微信摄像头、相册选择插件16、集成美颜功能17、集成TPNS消息推送181.实现群组功能相关的设置session好友列表1.监听回调事件在开发过程中,我们可以被动y通过监听回调事件获取session变化,通过API主动获取session缓存数据,即主动获取sdkList数据底层缓存的session,callback是最新的。一般来说,回调的时效性要高于API。主动获取对话列表:getConversationList(){let{data}=awaitthis.$txim.getConversationList(this.nextSeq,999)this.nextSeq=data.nextSeqdata.conversationList=data.conversationList||data.conversationsletconversationList=数据。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)回调事件处理:asynconConversationHandler({data}){//这里的data是session变化的列表,需要判断是否增加或改变(通过item.conversationID判断)for(letitemofdata){letindex=this.conversationList.findIndex(R=>R.conversationID===item.conversationID)if(index>=0){this.conversationList.splice(index,1,item)}else{this.conversationList.push(item)}}},2.同步刷新read一般情况下,当我们收到数据时,我们将其标记为已读。因此,我们需要监听消息事件,判断当前聊天记录是否刷新。事件监听://监听新消息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)//普通消息(非高级)回调事件处理:asynconRecvMessageHanlder({data}){letisC2C=!!(data.sender.userID||data.sender)letsender=data.sender.userID||data.sender.groupIDif(this.currentChatId==sender){是C2C吗?this.$txim.markC2CMessageAsRead(sender):this.$txim.markGroupMessageAsRead(sender)}}3.删除sessionmessage如果显示有新增,则对应删除本地sessionmessage,删除Weshould注意本地聊天消息。删除后,只有本地聊天消息消失,但云仍然存在。开发者可以在腾讯云后台配置历史记录的天数。doDeleteItem(item){//这里的item是通过接口回调的conversationList.splice(index,1)}有什么问题或者需求可以私聊我。欢迎大家一起学习交流。