chat-uikit-react 介绍
chat-uikit-react 是基于腾讯云 Chat SDK 的一款 react UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件,您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-react 界面效果如下图所示:
您可以在线体验 web & H5 demo:
TUIKit Web 端界面效果如下图所示:
TUIKit H5 端界面效果如下图所示:
开发环境要求
React^18.0(不支持 17.x 版本)
TypeScript
node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
npm(版本请与 node 版本匹配)
chat-uikit-react 集成
步骤1:创建项目
创建一个新的 React 项目,您可自行选择是否需要使用 ts 模版。
npx create-react-app sample-chat --template typescript
创建项目完成后,切换到项目所在目录。
步骤2:下载 chat-uikit-react 组件
npm install @tencentcloud/chat-uikit-react
步骤3:引入 chat-uikit-react 组件
注意:
以下代码中未填入 SDKAppID
、userID
和 userSig
,需在 步骤4 中获取相关信息后进行替换。 替换 App.tsx 中的内容,或者您可以新建一个组件引入。
import React, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUIKit } 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
}
export default function SampleChat() {
const init = () => {
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
}).catch(() => {});
}
useEffect(() => {
init();
}, [])
// language 支持 en / zh
return (
<TUIKit language={'en'}></TUIKit>
)
}
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, { useEffect, useState } from 'react';
import { ChatSDK } from '@tencentcloud/chat';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIKit } from './TUIKit/index';
const config = {
SDKAppID: 0,
userID: 'test-user1',
userSig: '',
}
export default function SampleChat() {
const init = () => {
TUILogin.login({
...config,
useUploadPlugin: true
}).then(() => {
}).catch(() => {});
}
useEffect(() => {
init();
}, [])
return (
<TUIKit language={'en'}></TUIKit>
)
}
步骤4:创建一个应用
2. 单击 Create Application,输入您的应用程序名称,然后单击 Create。
3. 创建完成后,您可以在控制台概览页面看到新应用的状态、服务版本、SDKAppID、创建时间、标签、过期时间。
步骤5:获取 userID 和 userSig
userID
进入 Chat 产品子页面后,点击 Users
,进入用户管理页面。
单击 Create account
,弹出创建账号信息填写框。如果只是普通成员,我们建议您选择General
类型。
为了您更好的体验消息收发等功能,建议您创建两个 userID。
步骤6:启动项目
替换 App.tsx 中的 SDKAppID、userID、userSig,然后运行命令如下:
注意:
1. 请确保 步骤3 代码中 SDKAppID
、userID
和 userSig
均已成功替换,如未替换将会导致项目表现异常。 步骤7:发送您的第一条消息
1. 项目启动之后单击左侧列表“+”发起单聊。
2. 在搜索栏输入 步骤5 中创建的 userID,进行回车确认。 3. 在输入框中输入消息并回车发送。
常见问题
什么是 UserSig?
UserSig 是用户登录 Chat 的密码,其本质是对 UserID 等信息加密后得到的密文。
如何生成 UserSig?
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。 注意:
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。
交流与反馈
相关文档
UIKit 相关:
实现更多功能,请参考 ChatEngine API 文档:
本页内容是否解决了您的问题?