Chat UIKit 是基于腾讯云 IM SDK 的一款 UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、关系链、群组、音视频通话等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。
Chat UIKit 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 Chat UIKit 时只需关注自身业务或个性化扩展即可。
您可以在线体验:
TUIKit Web 端界面效果如下图所示:
TUIKit H5 端界面效果如下图所示:
LiveChat 界面效果如下图所示:
ChatBot 界面效果如下图所示:
跑通 demo
步骤1:下载源码
$ git clone https://github.com/TencentCloud/chat-uikit-react
$ cd chat-uikit-react/examples/sample-chat
$ npm install
git clone https://github.com/TencentCloud/chat-uikit-react
cd chat-uikit-react/examples/sample-chat
npm install
步骤2:配置 demo
1. 打开examples/sample-chat
项目,通过路径./examples/sample-chat/src/debug/GenerateTestUserSig.js
找到GenerateTestUserSig.js
文件。
2. 在GenerateTestUserSig.js
文件中设置 SDKAPPID
和 SECRETKEY
,其值可以在IM控制台中获取。 点击目标应用卡片,进入其配置页面。 3. 将密钥信息复制并保存到 ./examples/sample-chat/src/debug/GenerateTestUserSig.js
文件中。
注意:
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。 步骤3:启动项目
步骤4:发送您的第一条消息
1. 项目启动成功后,点击“+”图标,进行创建会话。
2. 在输入框中搜索另一个用户的 userID。
3. 点击用户头像发起会话。
4. 在输入框输入消息,按下"enter"键发送。
集成 chat-uikit-react
交流与反馈
本页内容是否解决了您的问题?