tencent cloud


Quick Integration Solution (Web)

Last updated: 2022-04-01 17:03:05

    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

    Feature Description
    Search Searches for and displays conversations or messages
    Conversation Pulls and displays the conversation list
    Chat Receives, sends, and displays messages
    Relationship Chain Pulls and displays the friend list
    Group Pulls and displays group information
    Audio/Video Call Makes audio/video calls


    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.

    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:


    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support