React

最近更新时间:2025-07-28 10:50:12

我的收藏

TUIKit 介绍

TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、关系链、群组、音视频通话等功能。 基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。 TUIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。 基于 React 开发的 TUIKit 界面风格更契合境外客户的使用习惯,而且支持国际化,如果您的业务有出海的需求,欢迎接入。

Example App

我们构建了可供体验的在线 Demo,并将代码开源到了 GitHub - chat-uikit-react
Web 端界面效果如下图所示:




开发环境要求

React v18.0
TypeScript
Node.js >= v18
Npm(版本请与 Node.js 版本匹配)

跑通demo

步骤1:下载源码

# Run the code in CLI
$ git clone https://github.com/TencentCloud/chat-uikit-react
# Go to the project
$ cd chat-uikit-react
# Install dependencies of the demo and build chat-uikit-react
$ npm install

步骤2:配置 demo

说明:
为了尊重版权,IM Demo/TUIKit 工程中默认不包含大表情元素切图。在正式上线商用前,请您替换为自己设计或拥有版权的其他表情包。请注意,下图所示的默认小黄脸表情包版权属于腾讯云,您可以通过升级至 IM 企业版套餐 免费使用该表情包。



打开 /src/pages/ChatGithub/index.tsx 文件,找到以下代码片段,并填入登录信息。
export const loginInfo = {
// Your Application SDKAppID, number type
SDKAppID: 0,
// Your UserID, string type
userID: '',
// Your UserSig, string type
userSig: '',
}

步骤3:获取 SDKAppID、userID 和 userSig

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

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

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

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

步骤4:启动项目

# Launch the project
$ npm run dev

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

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




步骤6:开通云端审核功能

在消息发送、资料修改等场景中,可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,还有可能违法并导致业务被监管部门查封。
即时通信 IM 支持云端审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。您可直接前往 云端审核控制台 开通免费试用,每个应用可免费试用7天(含10000次免费抵扣量)。

常见问题

什么是 UserSig?

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

如何生成 UserSig?

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

相关文档

参考文档

UIKit 相关:

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