please select
Docs Overview/
React/

React

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, { useEffect } from 'react';
import { UIKitProvider, 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, Get it from Step 5
  userSig: '', // Your userSig, Get it from Step 5
}
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 userID = 'test-user2'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID); 
  };

  useEffect(() => {
    init();
  }, []);
  
  // language support en-US / zh-CN / ja-JP / ko-KR
  return (
    <UIKitProvider language={'en-US'}>
      <TUIChat/>
    </UIKitProvider>   
  )
}
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, TUIChat } from './TUIKit/index';
import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";

const config = {
  SDKAppID: 0, // Your SDKAppID, Get it from Step 4
  userID: 'test-user1', // Login UserID, Get it from Step 5
  userSig: '', // Your userSig, Get it from Step 5
}
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 userID = 'test-user2'; // userID: Recipient of the Message userID, Get it from Step 5
    const conversationID = `C2C${userID}`;
    TUIConversationService.switchConversation(conversationID); 
  };
  
  useEffect(() => {
    init();
  }, []);
  
 // language support en-US / zh-CN / ja-JP / ko-KR
  return (
    <UIKitProvider language={'en-US'}>
      <TUIChat/>
    </UIKitProvider>
  )
}


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:

chat-uikit-react npm
Demo Source Code and Running Example

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

chat-uikit-engine npm
chat-uikit-engine API documentation