tencent cloud

Feedback

Last updated: 2024-06-18 15:31:28

    Applicable Scenario

    For Web & H5 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.
    

    Environment Requirements

    React ≥ v18.0 (Version 17.x is not supported.)
    TypeScript
    Node (The Node version should be no earlier than 12.13.0 and no later than 17.0.0. The official LTS version 16.17.0 of Node.js is recommended.)
    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.
    cd sample-chat

    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.
    npm Integration Method
    Source Code Integration Method
    Replace the content in App.tsx, or create a new component for import.
    import React, { useEffect } from 'react';
    import { TUIKit, TUIChat } from '@tencentcloud/chat-uikit-react';
    import { TUILogin } from '@tencentcloud/tui-core';
    import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
    import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
    
    const config = {
    SDKAppID: 0, // Your SDKAppID, Get it from Step 4
    userID: 'test-user1', // Login UserID
    userSig: '', // Your userSig
    }
    export default function SampleChat() {
    const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openChat();
    }).catch(() => {});
    }
    
    const openChat = () => {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const conversationID = '';
    TUIConversationService.switchConversation(conversationID);
    };
    
    useEffect(() => {
    init();
    }, []);
    // language support en or zh
    return (
    <TUIKit language={'en'}>
    <TUIChat/>
    </TUIKit>
    )
    }
    1. Copy TUIKit to the src directory of your own project:
    macOS
    Windows
    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 { TUIKit, TUIChat } from './TUIKit/index';
    import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
    
    const config = {
    SDKAppID: 0, // Your SDKAppID
    userID: 'test-user1', // Login UserID
    userSig: '', // Your userSig
    }
    export default function SampleChat() {
    const init = () => {
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openChat();
    }).catch(() => {});
    }
    const openChat = () => {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const conversationID = '';
    TUIConversationService.switchConversation(conversationID);
    };
    useEffect(() => {
    init();
    }, []);
    // language support en or zh
    return (
    <TUIKit language={'en'}>
    <TUIChat/>
    </TUIKit>
    )
    }
    

    Step 4: Creating an Application

    1. Log in to the Chat console.
    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

    Click the target application tab to enter the Account Management page, create an account, and get the userID.
    
    Go to the Chat console > UserSig Tools, enter the userID to generate a userSig, and then copy it. For more information about userSig, see Generating UserSig.
    

    Step 6: Starting the Project

    Replace SDKAppID, userID, and userSig in App.tsx, and then run the following command:
    npm run start
    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.
    3. If the project fails to start, check whether the environment requirements are met.

    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

    Join the Telegram technical discussion group or WhatsApp discussion group, and obtain the support from professional engineers to solve your difficulties.

    References

    UIKit-related:

    To enable more features, refer to the ChatEngine API documentation:

    
    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