产品动态
公告
Web & H5 & Uniapp (Vue)
功能描述
@tencentcloud/chat-uikit-vue 从 v2.0.0 版本开始，已支持“用户在线状态”功能， 效果如下：
注意：
“用户在线状态”功能仅体验版、专业版、专业版plus和企业版支持，使用前请确认已开通体验版、专业版、专业版plus或企业版套餐。
“用户在线状态”功能需要在 Chat Console 打开用户状态开关，使用前请确认开关已经打开。
开启/关闭用户在线状态
“用户在线状态”为默认关闭，您需要按照以下步骤开启：
import { TUIUserService } from "@tencentcloud/chat-uikit-engine";// open user online status// This interface is only valid when called after successful loginTUIUserService.switchUserStatus({ displayOnlineStatus: true });// close user online status// This interface is only valid when called after successful loginTUIUserService.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 中默认包含，不需要用户手动实现。
TUIConversion 与 TUIContact组件中均支持“用户在线状态”功能，以下以 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 展示该用户在线状态：
<divv-if="props.displayOnlineStatus":class="{'online-status': true,'online-status-online': isOnline,'online-status-offline': !isOnline}"></div>
常见问题
调用订阅/取消订阅接口时，接口提示 “72001” 的错误码
Error: 套餐包不支持该接口的使用，请升级到专业版、专业版Plus或企业版套餐
“用户在线状态”功能仅专业版、专业版Plus或企业版套餐支持，该报错信息表示您当前的套餐包不支持此能力。
交流与反馈
文档反馈