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
git clone https://github.com/TencentCloud/chat-uikit-react
cd chat-uikit-react
npm install && cd examples/sample-chat && npm install
git clone https://github.com/TencentCloud/chat-uikit-react
cd chat-uikit-react
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
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
Contact Us
Was this page helpful?