tencent cloud

Web demo is a set of UI components based on the IM SDK. It provides features such as conversation, chat, search, relationship chain, group, and audio/video call. You can use these UI components to quickly build your own business logic.

Feature Description

Directions

Step 1. Download the source code

Download the SDK and demo source code that fit your needs.

# Run in CLI
git clone https://github.com/tencentyun/TIMSDK.git

# Go to the web project

cd TIMSDK/Web/Demo

# Install dependencies
npm install

Step 2. Initialize the demo

1. Open the project in the web directory, and find the GenerateTestUserSig file via the path /public/debug/GenerateTestUserSig.js.
2. Set required parameters in the GenerateTestUserSig file, where SDKAppID and Key can be obtained in the IM console. Click the card of the target app to go to its basic configuration page.
   
3. In the Basic Information section, click Display key, and copy and save the key information to the GenerateTestUserSig file.

Note：

In this document, the method to obtain UserSig is to configure a SECRETKEY in the client code. In this method, the SECRETKEY is vulnerable to decompilation and reverse engineering. Once your SECRETKEY is disclosed, attackers can steal your Tencent Cloud traffic. Therefore, this method is only suitable for locally running a demo project and feature debugging.
The correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an app-oriented API. When UserSig is needed, your app can send a request to the business server to obtain a dynamic UserSig. For more information, see How to Generate UserSig on the Server.

Step 3. Integrate static resources

Integrate static resources (such as tools and images) into your project.

Step 4. Integrate necessary modules

1. Copy all components to your project:
   
2. Alternatively, only integrate the modules you need. Take the conversation module as an example:
   

Step 5. Update the route

Update the route based on the imported modules:

References

• SDK API Documentation
• SDK Update Log
• Demo Source Code