Web & H5 & Uniapp

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 });

import { TUILogin } from "@tencentcloud/tui-core";
import { TUIUserService } from "@tencentcloud/chat-uikit-engine";

TUILogin.login(loginInfo).then((res: any) => {
  TUIUserService.switchUserStatus({ displayOnlineStatus: true });
});

TUIStore.watch(StoreName.USER, {
  ...
  // 监听是否开启“用户在线状态”
  displayOnlineStatus: (status: boolean) => {
    displayOnlineStatus.value = status;
  },
  // 监听“用户在线状态”列表变动
  userStatusList: (list: Map<string, IUserStatus>) => {
    list?.size && (userOnlineStatusMap.value = Object.fromEntries(list?.entries()));
  },
});

function getOnlineStatus(): boolean {
  return (
    props.displayOnlineStatus &&
    props.userOnlineStatusMap &&
    props.item?.userID &&
    props.userOnlineStatusMap?.[props.item.userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE 
  );
};

// 相关 dom 结构
<div
  v-if="props.displayOnlineStatus"
  :class="{
    'online-status': true,
    'online-status-online': isOnline,
    'online-status-offline': !isOnline
  }"
></div>