React

最近更新时间:2025-11-14 10:28:21

我的收藏
本文介绍如何快速跑通 IM Demo 来体验文字、语音、视频等消息发送功能。
推荐使用更高效的 AI 集成助手
我们为您提供了全新的 AI 集成方式,如果您不需要完整的 Demo 工程, 只想快速开始集成,推荐您使用更高效的 AI 集成助手,只需要简单描述您的需求,即可自动生成集成代码,大幅提升开发效率。

快速体验


在本地接入之前,我们构建了可供在线体验的 Demo

前提条件

开通服务

1. 登录 即时通信 IM 控制台,在应用管理页面,单击创建新应用。如果您已有应用,可省略创建应用过程。

2. 应用管理页面的 SDKAppID 列获取 SDKAppID 和密钥信息。
获取 SDKAppID 和 SecretKey
获取 SDKAppID 和 SecretKey

注意:
查看密钥信息需要验证身份。
密钥信息为敏感信息,为防止他人盗用,请妥善保管,谨防泄露。
3. 创建 2~3 个预设账号,用于体验单聊能力和群聊能力。

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

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

开发环境要求

React v18.0
TypeScript
Node.js >= v18(推荐使用当前的稳定版本 LTS v22.x)
npm(版本请与 Node.js 版本匹配)
Git

操作步骤

获取 Demo

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

运行 Demo

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



# Launch the project
$ npm run dev
运行之后点击体验 Chat 功能卡片进入登录页,填入获取的 SDKAppID、userID、secretKey 后即可体验聊天功能。

体验单聊和群聊功能

登录完成后会自动跳转到 Chat 场景,可以体验聊天功能。

体验单聊功能:搜索好友并发送您的第一条消息



体验群聊功能:创建群聊并发送一条消息



常见问题

如何开通云端审核功能?

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

什么是 UserSig?

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

如何生成 UserSig?

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

参考信息

相关文档