tencent cloud

文档反馈

Web & H5 & Uniapp (Vue)

最后更新时间:2024-07-10 16:26:41

    功能描述

    @tencentcloud/chat-uikit-vue 从 v2.0.0 版本开始,已支持“用户在线状态”功能, 效果如下:
    
    
    
    注意:
    “用户在线状态”功能仅进阶版支持,使用前请确认已开通进阶版套餐。
    “用户在线状态”功能需要在 Chat Console 打开用户状态开关,使用前请确认开关已经打开。

    开启/关闭用户在线状态

    用户在线状态”为默认关闭,您需要按照以下步骤开启:
    import { TUIUserService } from "@tencentcloud/chat-uikit-engine";
    
    // open user online status
    // This interface is only valid when called after successful login
    TUIUserService.switchUserStatus({ displayOnlineStatus: true });
    
    // close user online status
    // This interface is only valid when called after successful login
    TUIUserService.switchUserStatus({ displayOnlineStatus: false });
    注意:
    以上接口 TUIUserService.switchUserStatus 仅在登录成功后有效,请务必在登录后再调用该接口。
    以下是登录后调用该接口开启用户在线状态示例代码:
    import { TUILogin } from "@tencentcloud/tui-core";
    import { TUIUserService } from "@tencentcloud/chat-uikit-engine";
    
    TUILogin.login(loginInfo).then((res: any) => {
    TUIUserService.switchUserStatus({ displayOnlineStatus: true });
    });

    扩展资料:TUIKit 内部是如何实现“用户在线状态”功能的?

    说明:
    以下内容仅为辅助阅读资料,用户在线状态功能已在 TUIKit 中默认包含,不需要用户手动实现。
    TUIConversionTUIContact组件中均支持“用户在线状态”功能,以下以 TUIContact 为例进行讲解:
    1. 监听用户在线状态列表变化
    TUIKit/components/TUIContact/contact-list/index.vue 中, 监听用户在线状态列表变化:
    TUIStore.watch(StoreName.USER, {
    ...
    displayOnlineStatus: (status: boolean) => {
    displayOnlineStatus.value = status;
    },
    userStatusList: (list: Map<string, IUserStatus>) => {
    list?.size && (userOnlineStatusMap.value = Object.fromEntries(list?.entries()));
    },
    });
    2. 用户在线状态展示
    TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue 中:
    2.1 解析该用户在线状态:
    function getOnlineStatus(): boolean {
    return (
    props.displayOnlineStatus &&
    props.userOnlineStatusMap &&
    props.item?.userID &&
    props.userOnlineStatusMap?.[props.item.userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
    );
    };
    2.2 展示该用户在线状态:
    <div
    v-if="props.displayOnlineStatus"
    :class="{
    'online-status': true,
    'online-status-online': isOnline,
    'online-status-offline': !isOnline
    }"
    ></div>

    常见问题

    调用订阅/取消订阅接口时,接口提示 “72001” 的错误码

    72001 错误码表示在控制台上并没有开启对应的能力,请登录 Chat Console 打开对应的功能开关。
    
    
    

    Error: 套餐包不支持该接口的使用,请升级到旗舰版套餐

    “用户在线状态”功能仅旗舰版套餐支持,该报错信息表示您当前的套餐包不支持此能力。

    交流与反馈

    加入Telegram 技术交流群组WhatsApp 交流群,享有专业工程师的支持,解决您的难题。
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持