Tencent Cloud

Recent Pages

Web React

Last updated: 2024-04-01 16:36:36

Chat UIKit is a UI component library based on Tencent Cloud IM SDK. It provides universal UI components to offer features such as conversation, chat, relationship chain, group, and audio/video call features. With these UI components, you can quickly build your own business logic.
When implementing UI features, components in Chat UIKit will also call the corresponding APIs of the IM SDK to implement IM-related logic and data processing, allowing developers to focus on their own business needs or custom extensions.
Click to experience the Demo.
﻿
﻿
﻿
﻿
Running Demo
Step 1: Download the source code
MacOS
Windows
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react
# Install dependencies of the demo
npm install && cd examples/sample-chat && npm install
# Run the code in CLI
git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
cd chat-uikit-react
# Install dependencies of the demo
npm install
cd examples/sample-chat
npm install
Step 2: Configure the demo
1. Open the examples/sample-chat project and find the GenerateTestUserSig.js file in the path ./examples/sample-chat/src/debug/GenerateTestUserSig.js.
2. In the GenerateTestUserSig.js file, set SDKAPPID and SECRETKEY. Their values can be obtained in the IM console. Click the target application tab to enter its configuration page.
Information such as SDKAppID and secretKey can be obtained in the IM console:
﻿
﻿
3. Copy the key information and save it to the ./examples/sample-chat/src/debug/GenerateTestUserSig.js file.
﻿
Note:
This document mentions a method for generating UserSig by configuring a secret key in the client code. This method makes the secret key susceptible to decompilation and reverse engineering. Once your key is compromised, attackers can misappropriate your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo and debugging features.
The correct way to generate UserSig is to integrate the UserSig computation code into your server and provide an API for the app. When UserSig is needed, your app should request a dynamic UserSig from the business server. For more information, see How to Generate a UserSig on the Server.
Step 3: Start the project
# Launch the project
npm run start
Step 4: Send your first message
1. After the project is started successfully, click + to create a conversation.
2. Enter a userID in the search box.
3. Click the user's avatar to initiate a conversation.
4. Enter a message in the input box and press Enter to send.
﻿
Integrating chat-uikit-react
If you wish to integrate chat-uikit-react into your project, please go to Integration (UI Included)/Integrating Basic Features (React) .
Contact Us
Join the Telegram technical discussion group or WhatsApp discussion group, enjoy the support of professional engineers, and solve your difficulties.
﻿