99 lines
3.3 KiB
Markdown
99 lines
3.3 KiB
Markdown
|
## 关于 chat-uikit-engine
|
|||
|
|
|
|||
|
|
chat-uikit-engine 是腾讯云 Chat TUIKit 的基础库，它同时支持 Web、H5、uni-app、小程序，并且与框架（vuejs, react, react-native, angular等）无关。基于我们精心设计的 Chat TUIKit，您可以快速构建界面优美的、跨平台的、可靠的、可扩展的 Chat 应用。
|
|||
|
|
|
|||
|
|
chat-uikit-engine 由 service、model 和 store 三大模块组成，其作用如下：
|
|||
|
|
|
|||
|
|
- service 提供了一系列简化的聊天服务接口，包括切换会话、发送消息等。
|
|||
|
|
|
|||
|
|
- model 提供了一系列数据模型，如 ConversationModel、MessageModel 等。这些模型类用来管理聊天数据。
|
|||
|
|
|
|||
|
|
- store 提供了一系列状态管理模块，如会话状态管理、消息状态管理等，帮助开发者更加方便地管理聊天数据。
|
|||
|
|
|
|||
|
|
## 【安装】
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
npm install @tencentcloud/chat-uikit-engine
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 【集成】
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
|
|||
|
|
|
|||
|
|
// login to Tencent Cloud Chat
|
|||
|
|
TUIChatEngine.login({
|
|||
|
|
SDKAppID: 0, // 将0替换为您的云通信应用的 SDKAppID，类型为 Number
|
|||
|
|
userID: 'your userID',
|
|||
|
|
userSig: 'your userSig',
|
|||
|
|
// 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
|
|||
|
|
useUploadPlugin: true,
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 【发送第一条消息】
|
|||
|
|
|
|||
|
|
#### 步骤 1：创建并打开会话
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
|
|||
|
|
|
|||
|
|
TUIConversationService.switchConversation("C2Cuser1")
|
|||
|
|
.then() => {
|
|||
|
|
console.warn("success");
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
console.log(error);
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 步骤 2：监听 messageList
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import {
|
|||
|
|
TUIStore,
|
|||
|
|
StoreName,
|
|||
|
|
IMessageModel,
|
|||
|
|
} from '@tencentcloud/chat-uikit-engine';
|
|||
|
|
|
|||
|
|
// 收到新消息、发送消息、删除消息等操作都会导致 messageList 发生变更
|
|||
|
|
// watch messageList，开发者可及时获取到变更后的最新的 messageList
|
|||
|
|
TUIStore.watch(StoreName.CHAT, {
|
|||
|
|
messageList: (list: Array<IMessageModel>) => {
|
|||
|
|
console.log("messageList", list); // messageList<IMessageModel>
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 步骤 3：发送第一条消息
|
|||
|
|
|
|||
|
|
发送第一条消息后，开发者可以通过 **步骤2** 获取更新后的消息列表。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
|
|||
|
|
|
|||
|
|
TUIChatService.sendTextMessage({
|
|||
|
|
payload: {
|
|||
|
|
text: "Hello world!",
|
|||
|
|
},
|
|||
|
|
}).catch((error) => {
|
|||
|
|
console.log(error);
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 相关资源
|
|||
|
|
|
|||
|
|
- [TUIChatEngine 接口文档](https://web.sdk.qcloud.com/im/doc/chat-engine/index.html)
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
|
|||
|
|
#### 1. 什么是 UserSig？
|
|||
|
|
|
|||
|
|
UserSig 是用户登录即时通信 IM 的密钥，其本质是对 UserID 等信息加密后得到的密文。
|
|||
|
|
|
|||
|
|
#### 2. 如何生成 UserSig？
|
|||
|
|
|
|||
|
|
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688#GeneratingdynamicUserSig)。
|
|||
|
|
|
|||
|
|
本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见上文。
|