Web & H5 & Uniapp

最近更新时间:2024-06-04 10:37:21

我的收藏

功能描述

@tencentcloud/chat-uikit-vue 从 v2.0.0 版本开始,已支持“用户在线状态”功能, 效果如下:

注意:
用户在线状态功能仅旗舰版套餐支持,使用前请确认。
用户在线状态功能需要在 即时通信 IM 控制台 打开对应的用户状态开关,使用前请确认。

开启/关闭用户在线状态

用户在线状态”为默认关闭,您需要按照以下步骤开启:
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 展示该用户在线状态:
// 相关 dom 结构
<div
v-if="props.displayOnlineStatus"
:class="{
'online-status': true,
'online-status-online': isOnline,
'online-status-offline': !isOnline
}"
></div>

常见问题

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

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


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

“用户在线状态”功能仅旗舰版套餐支持,该报错信息表示您当前的套餐包不支持此能力,请登录 即时通信 IM 购买页 开通旗舰版进行体验。

交流与反馈

单击进入 IM 社群,享有专业工程师的支持,帮助解决您的难题。