Web(React)

最近更新时间:2024-10-09 15:23:51

我的收藏

chat-uikit-react 介绍

chat-uikit-react 是基于腾讯云 Chat SDK 的一款 react UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件,您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-react 界面效果如下图所示:
您可以在线体验:
Web Demo
H5 Demo
TUIKit Web 端界面效果如下图所示:

TUIKit H5 端界面效果如下图所示:


开发环境要求

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 方式下载 chat-uikit-react 并在项目中使用,另外在 GitHub 中也提供相关的 开源代码,您也可在此基础上进行开发您自己的组件库。
npm install @tencentcloud/chat-uikit-react

步骤3:引入 chat-uikit-react 组件

注意:
以下代码中未填入 SDKAppIDuserIDuserSig,需在 步骤4 中获取相关信息后进行替换。
为尊重表情设计版权,IM Demo/TUIKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的QQ表情版权归腾讯所有且不支持授权,请您谅解并知悉。



npm 集成方式
源码集成方式
替换 App.tsx 中的内容,或者您可以新建一个组件引入。
import React from 'react';
import { UIKitProvider, ConversationList, Chat, ChatSetting } from '@tencentcloud/chat-uikit-react';
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: 'test-user1', // Login UserID, Get it from Step 5
userSig: '', // Your userSig, Get it from Step 5
}
TUILogin.login({
...config,
useUploadPlugin: true
})
.then(() => {})
.catch(() => {});

export default function SampleChat() {
// language support en-US / zh-CN / ja-JP / ko-KR
return (
<div style={{display: 'flex', height: '100vh'}}>
<UIKitProvider language={'en-US'}>
<div style={{maxWidth: '400px'}}>
<ConversationList />
</div>
<Chat />
<ChatSetting />
</UIKitProvider>
</div>
);
}
1. 将 TUIKit 拷贝到自己项目的 src 文件目录下:
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. 替换 App.tsx 中的内容,或者您可以新建一个组件引入。
import React from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { UIKitProvider, ConversationList, Chat, ChatSetting } from './TUIKit/index';

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
}

TUILogin.login({
...config,
useUploadPlugin: true
})
.then(() => {})
.catch(() => {});

export default function SampleChat() {
// language support en-US / zh-CN / ja-JP / ko-KR
return (
<div style={{display: 'flex', height: '100vh'}}>
<UIKitProvider language={'en-US'}>
<div style={{maxWidth: '400px'}}>
<ConversationList />
</div>
<Chat />
<ChatSetting />
</UIKitProvider>
</div>
);
}


步骤4:获取 SDKAppID、userID 和 userSig

SDKAppID:SDKAppID 是腾讯云 IM 服务区分客户账号的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的,不能互通。
您可以在 即时通信 IM 控制台 查看所有的 SDKAppID,单击创建新应用,可以创建新的 SDKAppID。

userID:可通过单击 即时通信 IM 控制台 -【账号管理】,切换至目标应用所在账号,即可创建账号并获取 userID。

userSig:可单击 即时通信 IM 控制台 > 开发工具 > UserSig生成&校验,填写创建的 userID,即可生成 userSig。


步骤5:启动项目

npm run start
注意:
1. 请确保 步骤3 代码中 SDKAppID、userID 和 userSig 均已成功替换,如未替换将会导致项目表现异常。
2. userID 和 userSig 为一一对应关系,具体参见 生成 UserSig。
3. 如遇到项目启动失败,请检查 开发环境要求 是否满足。

步骤6:发送您的第一条消息

1. 项目启动成功后,单击 + 图标,创建会话。
2. 在输入框中搜索另一个用户的 userID(参考:步骤4 -> 创建账号并获取 userID)。
3. 单击用户头像发起会话。
4. 在输入框输入消息,按下 enter 键发送。


常见问题

什么是 UserSig?

UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。

如何生成 UserSig?

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig
注意:
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。

是否支持 react 17.x 版本?

目前不支持 17.x 版本,仅支持 React ≥ v18.0。

相关文档

参考文档

UIKit 相关:

实现更多功能,请参考 ChatEngine API 文档: