This article will introduce how to quickly implement a chat demo. You will complete the following key steps within 10 minutes and ultimately get a chat feature with a full user interface. Before you start, you can directly experience the chat below or try CodeSandbox.
To respect the copyright of emoji designs, the Chat Demo/TUIKit project does not include cutouts of large emoji elements. Please replace them with your own designs or other emoji packs for which you hold the copyright before officially launching for commercial use. The default smiley face emoji pack shown below is copyrighted by Tencent Cloud and is available for licensed use for a fee. If you need to obtain a license, please submit a ticket to contact us.
1. Open the /src/pages/ChatGithub/index.tsx file, find the following code snippet, and fill in the login information.
exportconst loginInfo ={
// Your Application SDKAppID, number type
SDKAppID:0,
// Your UserID, string type
userID:'',
// Your UserSig, string type
userSig:'',
}
2. The login information requires three parts: SDKAppID, UserID, and UserSig.
2.1 SDKAppID and UserID can be obtained from the Chat Console. Click the target application card to enter its configuration page.
2.2 UserSig is a security signature calculated based on both. To temporarily obtain UserSig, go to the UserSig Tool under development tools in the console.
Note:
The correct UserSig issuance method is to integrate the UserSig calculation code into your server and provide an App-oriented API. When UserSig is required, your App can initiate request to the business server to obtain dynamic UserSig. For more details, see UserSig generation by the server.
Step 3: Start a Startup Item
# Launch the project
npm run dev
Step 4: Send Your First Message
Enter your message in the input box, then press Enter to send.
