Enable "User Online Status" | Disable "User Online Status" |
| |
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
is only effective after a successful sign in, please make sure to call this interface only after signing in.import { TUILogin } from "@tencentcloud/tui-core";import { TUIUserService } from "@tencentcloud/chat-uikit-engine";TUILogin.login(loginInfo).then((res: any) => {TUIUserService.switchUserStatus({ displayOnlineStatus: true });});
TUIConversion
and TUIContact
components support the "User Online Status" feature. The TUIContact
is given as an example for discussion below:TUIKit/components/TUIContact/contact-list/index.vue
, monitor changes in the user online status list:TUIStore.watch(StoreName.USER, {...displayOnlineStatus: (status: boolean) => {displayOnlineStatus.value = status;},userStatusList: (list: Map<string, IUserStatus>) => {list?.size && (userOnlineStatusMap.value = Object.fromEntries(list?.entries()));},});
TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue
:function getOnlineStatus(): boolean {return (props.displayOnlineStatus &&props.userOnlineStatusMap &&props.item?.userID &&props.userOnlineStatusMap?.[props.item.userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE);};
<divv-if="props.displayOnlineStatus":class="{'online-status': true,'online-status-online': isOnline,'online-status-offline': !isOnline}"></div>
Was this page helpful?