有奖捉虫:行业应用 & 管理与支持文档专题 HOT

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(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 -wexamples/sample-chat 项目会实时加载修改后的组件库,建议在需要自己开发修改组件库时使用。

步骤2:配置 demo

1. 打开 examples/sample-chat 项目,通过路径 ./examples/sample-chat/src/debug/GenerateTestUserSig.js 找到 GenerateTestUserSig.js 文件。
2. GenerateTestUserSig.js 文件中设置 SDKAPPIDSECRETKEY ,其值可以在 即时通信 IM 控制台 中获取。 点击目标应用卡片,进入应用的基础配置页面,例如:
?
?
?
3. 图中所示 区域,点击 复制,替换 GenerateTestUserSig.js 文件原有的 SDKAPPIDSECRETKEY
注意
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig
4. 进入应用的账号管理页面,创建账号并获取 userID,用于当作后续发送消息的测试用户。
?
?
?

步骤3:启动项目

# Launch the project
$ npm run start

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

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

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

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

交流与反馈

?点此进入 IM 社群,享有专业工程师的支持,解决您的难题。

常见问题

什么是 UserSig?

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

如何生成 UserSig?

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

相关文档

参考文档

UIKit 相关:

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


http://www.vxiaotou.com