tencent cloud

Feedback

Last updated: 2024-10-09 15:33:29

    Applicable Scenario

    For Web & Mobile 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.
    You can directly experience Chat below. Additionally, you may swiftly explore the online code implementation by trying our chat sandbox.
    

    Environment Requirements

    React version 18+ (Version 17.x is not supported.)
    TypeScript
    Node.js version 16+
    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 from 'react';
    import { UIKitProvider, Chat, ChatHeader, MessageInput, MessageList, ChatSetting } from '@tencentcloud/chat-uikit-react';
    import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
    import { TUILogin } from '@tencentcloud/tui-core';
    import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
    
    const config = {
    SDKAppID: 0, // Your SDKAppID, Get it from Step 4
    userID: 'YOUR_USER_ID', // Login UserID, Get it from Step 5
    userSig: 'YOUR_USER_SIG', // Your userSig, Get it from Step 5
    }
    
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openDefaultChat();
    }).catch(() => {});
    
    function openDefaultChat() {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const userID = 'administrator'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID);
    }
    
    export default function SampleChat() {
    // language support en-US / zh-CN / ja-JP / ko-KR
    return (
    <div style={{height: '100vh'}}>
    <UIKitProvider language={"en-US"}>
    <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
    </Chat>
    </UIKitProvider>
    </div>
    );
    }
    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 { UIKitProvider, Chat, ChatHeader, MessageInput, MessageList } from './TUIKit/index';
    import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";
    
    const config = {
    SDKAppID: 0, // Your SDKAppID, Get it from Step 4
    userID: 'YOUR_USER_ID', // Login UserID, Get it from Step 5
    userSig: 'YOUR_USER_SIG', // Your userSig, Get it from Step 5
    }
    TUILogin.login({
    ...config,
    useUploadPlugin: true
    }).then(() => {
    openDefaultChat();
    }).catch(() => {});
    function openDefaultChat() {
    // 1v1 chat: conversationID = `C2C${userID}`
    // group chat: conversationID = `GROUP${groupID}`
    const userID = 'administrator'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID);
    }
    
    export default function SampleChat() {
    // language support en-US / zh-CN / ja-JP / ko-KR
    return (
    <div style={{height: '100vh'}}>
    <UIKitProvider language={"en-US"}>
    <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
    </Chat>
    </UIKitProvider>
    </div>
    );
    }
    

    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

    userID
    Click to enter the Application you created above. You will see the Chat product entrance in the left sidebar. Click to enter.
    After entering the Chat Product subpage, click on Users to go to the User Management Page.
    Click Create account, a form for creating account information will pop up. If you are just a regular member, we recommend you choose the General type.
    To enhance your experience with message sending and receiving features, we recommend creating two userIDs.
    
    
    
    userSig can be generated in real-time using the development tools provided by the console. To access the development tools, click Chat Console > Development Tools > UserSig Tools > Signature (UserSig) Generator.
    
    
    

    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