跑通Demo

本文介绍如何快速跑通 IM Demo 来体验文字、语音、视频等消息发送功能。

快速体验


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

前提条件

开通服务

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

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

注意:
查看密钥信息需要验证身份。
密钥信息为敏感信息,为防止他人盗用,请妥善保管,谨防泄露。
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/TencentCloud/chat-uikit-react
# Go to the project
$ cd chat-uikit-react
# Install dependencies of the demo and build chat-uikit-react
$ npm install

配置 demo

说明:
为了尊重版权,IM 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: '',
}

运行 Demo

# Launch the project
$ npm run dev

发送您的第一条消息

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



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



常见问题

集成 chat-uikit-react

如果您想将 chat-uikit-react 集成到您的项目中,请跳转至 集成 chat-uikit-react

交流与反馈

加入 Telegram 技术交流群组WhatsApp 交流群,享有专业工程师的支持,解决您的难题。