• UIKit
  • SDK
  • サーバー API
Chat/
UIKit/
Web/
Features/
UIKit
  • Overview
  • インストール
    • 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
  • コンソールガイド
    • アプリケーションの作成とアップグレード
    • 基本設定
    • 機能設定
    • アカウント管理
    • グループ管理
    • コールバック設定
  • 製品紹介
    • メッセージ管理
      • シングルチャットメッセージ
      • メッセージの保存
      • オフラインプッシュ
      • グループメッセージ
      • メッセージフォーマット
    • アカウントシステム
      • ログイン認証
      • オンライン状態管理
    • グループ関連
      • グループシステム
      • グループ管理
    • ユーザープロファイルとリレーションシップチェーン
      • 資料管理
      • リレーションシップチェーン管理
  • 購入ガイド
    • 課金の概要
    • 価格
  • エラーコード
このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

ユーザーのオンライン状態

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.