美文网首页
九、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊

九、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊

作者: 智密科技 | 来源:发表于2022-01-16 00:00 被阅读0次

    文章概述

    前面几篇我们讲述了ui上面的东西,现在我们稍微回归一下业务,讲述一下聊天会话管理的实现

    聊天会话管理的实现

    1.加载会话列表

    在插件底层已经做好了会话缓存的处理,我们只需要根据腾讯提供的api加载即可,具体的定义如下:

    具体调用的代码如下,这里我们需要注意nextSeq这个参数,是由插件提供反馈的,因此我们每次执行getConversationList之后需要在callback中记录最新的nextSeq

    export default {

    data () {

    return {

    nextSeq: 0,

    conversationList: []

    }

    },

    mounted() {

    let{ data } = await this.$txim.getConversationList(this.nextSeq, 999)

    // 这里需要更新一下nextSeq

    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

    }

    }

    2. 删除会话项目

    删除某一条会话项目我们使用的api是deleteConversation,deleteConversation为删除会话记录api。请注意,删除会话的同时会导致本地储存的聊天记录一同删除,请谨慎使用。

    this.$txim.deleteConversation(conversationID)

    // 这里删除之后并不会有事件通知我们你删除了这条会话

    // 因此我们需要自己删除会话列表中的元素,触发界面刷新

    this.conversationList.splice(index, 1)

    3.设置会话草稿

    在微信中有一种特别的情况就是会话草稿,大致的情况如下图所示

    在这里我们主要使用的是setConversationDraft方法,这里仅仅是针对会话项目的标记而已,标记他的草稿,没有实际的作用,仅仅是本地显示使用。

    const conversation = uni.requireNativePlugin("TXIM-Conversation");

    let conversationID = '129308-4291-94810-428190-1238921'

    let draftText = '草稿'

    conversation.setConversationDraft(conversationID, draftText, res => {

    // res = { type, data, code }

      console.log(res)

    })

    项目开源地址及交流群

    项目成品效果查看:请点击项目引言

    项目开源地址:https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue

    Uniapp开发交流群:755910061

    相关文章

      网友评论

          本文标题:九、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊

          本文链接:https://www.haomeiwen.com/subject/khoxhrtx.html