Applicable Scenario
For Web & Mobile platforms, the private messaging (1V1) or group chat (Group) feature is integrated individually in real estate consultancy, e-commerce customer service, remote insurance claims assessment, and other scenarios.
You can directly experience Chat
below. Additionally, you may swiftly explore the online code implementation by trying our chat sandbox. Environment Requirements
React version 18+ (Version 17.x is not supported.)
TypeScript
npm (Its version shall match the Node version.)
chat-uikit-react Integration
Step 1: Creating a Project
Create a new React project. You can choose whether to use a TS template or not.
npx create-react-app sample-chat --template typescript
After the project is created, switch to the project directory.
Step 2: Downloading the chat-uikit-react Component
Download chat-uikit-react through npm and use it in your project. Additionally, GitHub also provides related open source code, based on which you can develop your own component library. npm install @tencentcloud/chat-uikit-react
Step 3: Importing the chat-uikit-react Component, Entering the userID/groupID, and Opening the Session for Chat
Note:
In the following code, SDKAppID
, userID
, and userSig
are not entered. Acquire relevant information in Step 4 and replace them accordingly. Note:
conversationID: Session ID. Composition of the session ID:
C2C${userID} (1v1 chat)
GROUP${groupID} (group chat)
For group chat:
The groupID can be acquired by calling the API [createGroup](https://web.sdk.qcloud.com/im/doc/chat-engine/ITUIGroupService.html#createGroup !7a98f97b561db02dacd13003fe30cc3d).
If it is an audio-video group, you must join the group by calling the API joinGroup before chat. Entering the Chat
Pass in the 'conversationID' by calling the API switchConversation, to enter the chat page. Source Code Integration Method
Replace the content in App.tsx, or create a new component for import.
import React from 'react';
import { UIKitProvider, Chat, ChatHeader, MessageInput, MessageList, ChatSetting } from '@tencentcloud/chat-uikit-react';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { TUILogin } from '@tencentcloud/tui-core';
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
const config = {
SDKAppID: 0,
userID: 'YOUR_USER_ID',
userSig: 'YOUR_USER_SIG',
}
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openDefaultChat();
}).catch(() => {});
function openDefaultChat() {
const userID = 'administrator';
const conversationID = `C2C${userID}`;
TUIConversationService.switchConversation(conversationID);
}
export default function SampleChat() {
return (
<div style={{height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</UIKitProvider>
</div>
);
}
1. Copy TUIKit to the src directory of your own project:
mkdir -p ./src/TUIKit && rsync -av ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit
xcopy .\\node_modules\\@tencentcloud\\chat-uikit-react .\\src\\TUIKit /i /e
2. Replace the content in App.tsx, or create a new component for import.
import React, { useEffect, useState } from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { UIKitProvider, Chat, ChatHeader, MessageInput, MessageList } from './TUIKit/index';
import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
const config = {
SDKAppID: 0,
userID: 'YOUR_USER_ID',
userSig: 'YOUR_USER_SIG',
}
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
openDefaultChat();
}).catch(() => {});
function openDefaultChat() {
const userID = 'administrator';
const conversationID = `C2C${userID}`;
TUIConversationService.switchConversation(conversationID);
}
export default function SampleChat() {
return (
<div style={{height: '100vh'}}>
<UIKitProvider language={"en-US"}>
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</UIKitProvider>
</div>
);
}
Step 4: Creating an Application
2. Click Create Application, enter your application name, and then click Create.
3. After an application is created, you can view the status, service version, SDKAppID, creation time, tag, and expiration time of the new application on the overview page of the console.
Step 5: Getting the userID and userSig
userID
Click to enter the Application you created above. You will see the Chat
product entrance in the left sidebar. Click to enter. After entering the Chat Product subpage, click on Users
to go to the User Management Page.
Click Create account
, a form for creating account information will pop up. If you are just a regular member, we recommend you choose the General
type.
To enhance your experience with message sending and receiving features, we recommend creating two userIDs.
Step 6: Starting the Project
Replace SDKAppID, userID, and userSig in App.tsx, and then run the following command:
Note:
1. Ensure that SDKAppID
, userID
, and userSig
in the code have been successfully replaced in Step 3, otherwise it may lead to an exception of the project. 2. The userID
and the userSig
are in one-to-one correspondence. For more information, see Generating UserSig. Step 7: Sending Your First Message
Enter a message in the input box and press the Enter key to send it.
FAQs
What is UserSig?
A UserSig is a password with which you can log in to Chat. It is essentially the ciphertext generated by encrypting information such as userID.
How can I generate a UserSig?
The UserSig is issued by integrating the computation code of UserSig into your server, and providing a project-oriented API. When a UserSig is needed, your project will initiate a request to the business server to acquire the dynamic UserSig. For more information, see How to Generate a UserSig on the Server. Note:
In the sample code provided in this document, the UserSig is acquired by configuring a SecretKey in the client code, but the SecretKey is highly susceptible to decompilation and reverse cracking. Once your key is compromised, attackers can misappropriate your Tencent Cloud traffic. Therefore, this method only applies to local running and feature debugging. For the correct issuance method of UserSig, refer to the above sections.
Contact Us
References
UIKit-related:
To enable more features, refer to the ChatEngine API documentation:
Was this page helpful?