• UIKit
  • SDK
  • 서버 API
Chat/
UIKit/
Web/
Features/
UIKit
  • 개요
  • 설치
    • TUIKit
      • React
      • Vue
    • TUIChat만
      • React
      • Vue
  • Features
    • 반응
    • 읽음 확인
    • 입력 상태
    • 사용자 온라인 상태
    • Message Search
    • Quote Reply
    • Voice Message To Text
    • Translate Message
  • 주제
    • UI 스타일 설정
      • Web
      • 모바일
  • 맞춤화
    • 메시지 맞춤화
    • Customize Emoji and Stickers
  • 현지화
  • Guideline for Beginners
  • 콘솔 안내
    • 애플리케이션 생성 및 업그레이드
    • 기본 구성
    • 기능 구성
    • 계정 관리
    • 그룹 관리
    • 콜백 구성
  • 제품 소개
    • 메시지 관리
      • 1대1 메시지
      • 메시지 저장
      • 오프라인 푸시
      • 그룹 메시지
      • 메시지 포맷
    • 계정 시스템
      • 로그인 인증
      • 온라인 상태 관리
    • 그룹 관련
      • 그룹 시스템
      • 그룹 관리
    • 사용자 정보 및 관계망
      • 정보 관리
      • 관계망 관리
  • 구매 가이드
    • 과금 개요
    • 가격
  • 에러코드
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

사용자 온라인 상태

Description

@tencentcloud/chat-uikit-vue starting from the v2.0.0 version, has started to support the "User Online Status" feature。



Note:
The User Online Status feature is only supported by the Ultimate edition, please confirm before use.
The User Online Status feature needs to be activated via the Chat Console, please confirm before use.

Enable/Disable User Online Status

"User Online Status" is switched off by default, you need to follow the steps below to enable it:
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 });
Note:
The above interface TUIUserService.switchUserStatus is only effective after a successful sign in, please make sure to call this interface only after signing in.
Here is the example code to enable user online status by calling this interface 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 });
});

Supplementary Information: How does TUIKit internally achieve the "user online status" feature?

Note:
The following content is only for the purpose of auxiliary reading. The user online status feature is already included in TUIKit by default, negating the need for manual implementation by the user.
Both the TUIConversion and TUIContact components support the "User Online Status" feature. The TUIContact is given as an example for discussion below:
1. Monitor User Online Status List Changes
In 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()));
},
});
2. Display of User Online Status
In TUIKit/components/TUIContact/contact-list/contact-list-item/index.vue:
2.1 Interpretation of the user's online status:
function getOnlineStatus(): boolean {
return (
props.displayOnlineStatus &&
props.userOnlineStatusMap &&
props.item?.userID &&
props.userOnlineStatusMap?.[props.item.userID]?.statusType === TUIChatEngine.TYPES.USER_STATUS_ONLINE
);
};
2.2 Display the online status of the user:
<div
v-if="props.displayOnlineStatus"
:class="{
'online-status': true,
'online-status-online': isOnline,
'online-status-offline': !isOnline
}"
></div>

FAQs

When invoking the Subscription/Cancel Subscription API, the interface prompts the error code "72001"

The error code 72001 indicates that the corresponding capability is not enabled on the console, please sign in to the Chat Console to activate the corresponding functional switch.




Error: The package does not support the usage of this API, please upgrade to the premium edition

The "User Online Status" feature is only supported by the premium package. This error message indicates that your current package does not support this capability.

Contact us

Join the Telegram technical exchange group or WhatsApp discussion group, benefit from the support of professional engineers, and solve your toughest challenges.