• UIKit
  • SDK
  • 服务端 API
Chat/
UIKit/
Web/
功能/
UIKit
  • 界面库介绍
  • 快速集成
    • TUIKit
      • React
      • Vue
    • TUIChat
      • React
      • Vue
  • 功能
    • 表情回应
    • 已读回执
    • 对方正在输入
    • 用户在线状态
    • 消息搜索
    • 消息引用
    • 语音转文字
    • 文本消息翻译
  • 主题
    • 设置界面风格
      • Web
      • Mobile
  • 自定义
    • 自定义消息
    • 自定义表情
  • 本地化
  • 开发指引
  • 控制台指南
    • 创建和升级应用
    • 基本配置
    • 功能配置
    • 账号管理
    • 群组管理
    • 回调配置
  • 产品介绍
    • 消息管理
      • 单聊消息
      • 消息存储
      • 离线推送
      • 群消息
      • 消息格式
    • 账号系统
      • 登陆验证
      • 在线状态管理
    • 群相关
      • 群组系统
      • 群组管理
    • 用户资料和关系链
      • 资料管理
      • 关系链管理
  • 购买指南
    • 计费概述
    • 价格中心
  • 错误码

用户在线状态

功能描述

@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 交流群,享有专业工程师的支持,解决您的难题。