About chat-uikit-engine

chat-uikit-engine is a wrapper based on Tencent Cloud Chat SDK that serves Chat UI with services, models, and stores (data management center). It provides common TUIModels including ConversationModel, MessageModel, etc.

Import Method

import TUIChatEngine, {
  TUIConversationService,
  TUIChatService,
  TUIGroupService,
  TUIUserService,
  TUITranslateService,
  TUIStore,
} from '@tencentcloud/chat-uikit-engine';

Feature Description

TUIChatEngine - Default export module, responsible for Chat SDK instantiation, login, logout, instance destruction, log output control, and other basic capabilities when no UI integration is needed.
TUIConversationService - Mainly responsible for conversation-related business logic.
TUIChatService - Mainly responsible for chat-related business logic.
TUIGroupService - Mainly responsible for group management-related business logic.
TUIUserService - Mainly responsible for user-related business logic.
TUITranslateService - Mainly responsible for internationalization translation-related business logic, can be ignored if this capability is not needed.
TUIStore - Mainly responsible for data management at the TUIChatEngine layer.

Note: Import the above modules as needed based on business requirements.

chat-uikit-engine Integration

Step 1: Download chat-uikit-engine

npm install @tencentcloud/chat-uikit-engine

Step 2: Login to chat-uikit-engine

import TUIChatEngine from '@tencentcloud/chat-uikit-engine';

// login TUIChatEngine
TUIChatEngine.login({
 SDKAppID: xxx,
 userID: 'xxx',
 userSig: 'xxx',
 useUploadPlugin: true, // Whether to enable upload plugin, true means enabled. The Chat SDK needs to use the upload plugin to send image, audio, video, file messages, etc., to upload files to Tencent Cloud Object Storage.
});

chat-uikit-engine Usage

Create First Conversation

Step 1: Listen to conversationList

import { TUIStore } from '@tencentcloud/chat-uikit-engine';

// list is conversationList, item is conversation model, when conversationList changes, you can watch the new conversationList
TUIStore.watch(StoreName.CONV, {
  conversationList: (list: Array<IConversationModel>) => {
    console.log(list) // conversationList<IConversationModel>
  },
});

Step 2: Create Conversation

After creating a conversation, you can get the updated conversation list through Step 1

import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';

 TUIConversationService.getConversationProfile('C2Cuser1').catch((error) => {
   console.log(error);
 });

Send First Message

Step 1: Listen to messageList

import { TUIStore } from '@tencentcloud/chat-uikit-engine';

// list is messageList, item is message model, when receiving new messages or sending messages, you can watch to get the new messageList
TUIStore.watch(StoreName.CHAT, {
  messageList: (list: Array<IMessageListModel>) => {
    console.log(list) // messageList<IMessageListModel>
  },
});

Step 2: Send First Message

After sending the first message, you can get the updated message list through Step 1

import { TUIChatService } from '@tencentcloud/chat-uikit-engine';

TUIChatService.sendTextMessage({
  payload: {
    text: 'Hello world!'
  },
}).catch((error) => {
  console.log(error);
});

Common Questions

1. What is UserSig?

UserSig is the key for users to log in to Instant Messaging IM, which is essentially a ciphertext obtained by encrypting UserID and other information.

2. How to Generate UserSig?

The UserSig signing method is to integrate the UserSig calculation code into your server and provide project-oriented interfaces. When UserSig is needed, your project initiates a request to the business server to obtain dynamic UserSig. For more details, please refer to Server-side UserSig Generation.

The example code in this document uses a method of configuring SECRETKEY in client-side code. In this method, SECRETKEY can be easily reverse-engineered and cracked. Once your key is leaked, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for local functional debugging. Please refer to the above for the correct UserSig signing method.

Tutorial: Integration Guide

Integration Guide