TUIKit 介绍
TUIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、关系链、群组、音视频通话等功能。
基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
TUIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 TUIKit 时只需关注自身业务或个性化扩展即可。
基于 React 开发的 TUIKit 界面风格更契合境外客户的使用习惯,而且支持国际化,如果您的业务有出海的需求,欢迎接入。
Example App
Web 端界面效果如下图所示:
![](https://qcloudimg.tencent-cloud.cn/image/document/507a440001c16fa95c2d85b5609c1566.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/507a440001c16fa95c2d85b5609c1566.png)
开发环境要求
React ≥ v18.0
TypeScript
node(12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0)
npm(版本请与 node 版本匹配)
跑通demo
步骤1:下载源码
# Run the code in CLI$ git clone https://github.com/TencentCloud/chat-uikit-react# Go to the project$ cd chat-uikit-react/examples/sample-chat# Install dependencies of the demo and build chat-uikit-react$ npm install
注意:
项目
examples/sample-chat
下依赖的 @tencentcloud/chat-uikit-react
为本地包,因此需要在 chat-uikit-react
根目录下执行 npm run build
或者 npm run start
,后者会启动 npm run rollup -c -w
, examples/sample-chat
项目会实时加载修改后的组件库,建议在需要自己开发修改组件库时使用。步骤2:配置 demo
说明:
为尊重表情设计版权,IM Demo/TUIKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的QQ表情版权归腾讯所有且不支持授权,请您谅解并知悉。
![](https://qcloudimg.tencent-cloud.cn/image/document/bbf1fd4c5cc6455acc4ffbc7600969fe.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/bbf1fd4c5cc6455acc4ffbc7600969fe.png)
1. 打开
examples/sample-chat
项目,通过路径 ./examples/sample-chat/src/debug/GenerateTestUserSig.js
找到 GenerateTestUserSig.js
文件。2. 在
GenerateTestUserSig.js
文件中设置 SDKAPPID
和 SECRETKEY
,其值可以在 即时通信 IM 控制台 中获取。 点击目标应用卡片,进入应用的基础配置页面,例如:![](https://qcloudimg.tencent-cloud.cn/image/document/0f54e61750aac56270c06021a1abd810.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0f54e61750aac56270c06021a1abd810.png)
3. 在 图中所示 区域,点击 复制,替换
GenerateTestUserSig.js
文件原有的 SDKAPPID
和 SECRETKEY
。注意:
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
4. 进入应用的账号管理页面,创建账号并获取 userID,用于当作后续发送消息的测试用户。
![](https://qcloudimg.tencent-cloud.cn/image/document/21289dd3a7fd0f27b2be3620c5447d02.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/21289dd3a7fd0f27b2be3620c5447d02.png)
步骤3:启动项目
# Launch the project$ npm run start
步骤4:发送您的第一条消息
1. 项目启动成功后,单击“+”图标,创建会话。
2. 在输入框中搜索另一个用户的 userID(参考:步骤2.4)。
3. 单击用户头像发起会话。
4. 在输入框输入消息,按下"enter"键发送。
![](https://qcloudimg.tencent-cloud.cn/image/document/e3e528eb682a05cf54b72fb0f48641a0.gif)
![](https://qcloudimg.tencent-cloud.cn/image/document/e3e528eb682a05cf54b72fb0f48641a0.gif)
步骤5:开通云端审核功能
在消息发送、资料修改等场景中,可能会扩散不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,还有可能违法并导致业务被监管部门查封。
即时通信 IM 支持云端审核(反垃圾信息)功能,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。您可直接前往 云端审核控制台 开通免费试用,每个应用可免费试用7天(含10000次免费抵扣量)。
交流与反馈
常见问题
什么是 UserSig?
UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。
如何生成 UserSig?
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意:
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见上文。