适用场景
Web & H5 平台，独立集成私信聊天（1V1）或者群聊（Group），例如房产中介咨询、电商在线客服、保险远程定损等。
开发环境要求
React ≥ v18.0 （17.x 版本不支持）
TypeScript
node（node.js ≥ 16.0.0）
npm（版本请与 node 版本匹配）
chat-uikit-react 集成
步骤1：创建项目
1. 创建一个新的 React 项目，您可自行选择是否需要使用 ts 模板。
npx create-react-app sample-chat --template typescript
2. 创建项目完成后，切换到项目所在目录。
cd sample-chat
步骤2：下载 chat-uikit-react 组件
npm install @tencentcloud/chat-uikit-react
步骤3：引入 chat-uikit-react 组件，填写 userID / groupID，打开会话进行聊天
注意：
conversationID：会话 ID。会话 ID 组成方式：
C2C${userID}（单聊）
GROUP${groupID}（群聊）
关于群聊：
通过调用 API createGroup 可获取 groupID。
如果是直播群， 需要通过调用 API joinGroup加入群，才可以进行聊天。
进入聊天的方式：
通过调用 API switchConversation，传入 conversationID 进入聊天页面。
替换 App.tsx 中的内容，或者您可以新建一个组件引入。
import React from 'react';import { UIKitProvider, Chat } 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 4userID: 'test-user1', // Login UserIDuserSig: '', // Your userSig}TUILogin.login({...config,useUploadPlugin: true}).then(() => {openChat();}).catch(() => { });function openChat() {// 1v1 chat: conversationID =// group chat: conversationID = `GROUP${groupID}`const userID = 'test-user2'; // userID: 消息接收方的 userIDconst conversationID = `C2C${userID}`;TUIConversationService.switchConversation(conversationID);}export default function SampleChat() {// language support en-US / zh-CN / ja-JP / ko-KRreturn (<div style={{display: 'flex', height: '100vh'}}><UIKitProvider language={'en-US'}><Chat /></UIKitProvider></div>);}
1. 将 TUIKit 拷贝到自己项目的 src 文件目录下：
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. 替换 App.tsx 中的内容，或者您可以新建一个组件引入。
import React from 'react';import { TUILogin } from '@tencentcloud/tui-core';import { UIKitProvider, Chat } from './TUIKit/index';import { TUIConversationService } from "@tencentcloud/chat-uikit-engine";const config = {SDKAppID: 0, // Your SDKAppIDuserID: 'test-user1', // Login UserIDuserSig: '', // Your userSig}TUILogin.login({...config,useUploadPlugin: true}).then(() => {openChat();}).catch(() => { });function openChat() {// 1v1 chat: conversationID =// group chat: conversationID = `GROUP${groupID}`const userID = 'test-user2'; // userID: 消息接收方的 userIDconst conversationID = `C2C${userID}`;TUIConversationService.switchConversation(conversationID);}export default function SampleChat() {// language support en-US / zh-CN / ja-JP / ko-KRreturn (<div style={{display: 'flex', height: '100vh'}}><UIKitProvider language={'en-US'}><Chat /></UIKitProvider></div>);}
步骤4：获取 SDKAppID、userID 和 userSig
SDKAppID：SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID：可通过单击 即时通信 IM 控制台 > 账号管理，切换至目标应用所在账号，即可创建账号并获取 userID。您可以创建两个或多个 userID 便于体验聊天。
例如：创建 test-user1、test-user2 两个账号
userSig：可单击 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 UserID，即可生成 UserSig。
步骤5：启动项目
npm run start
注意：
1. 请确保 步骤3 代码中 SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
2. userID 和 userSig 为一一对应关系，具体参见 生成 UserSig。
3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
步骤6：发送您的第一条消息
在输入框输入消息，按下 enter 键发送。
常见问题
什么是 UserSig？
UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
如何生成 UserSig？
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意：
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。
是否支持 react 17.x 版本？
目前不支持 17.x 版本，仅支持 React ≥ v18.0。
