@tencentcloud/chat-uikit-engine
Advanced tools
Comparing version 0.0.1 to 0.0.2
{ | ||
"name": "@tencentcloud/chat-uikit-engine", | ||
"version": "0.0.1", | ||
"version": "0.0.2", | ||
"description": "Tencent Cloud TUIChatEngine SDK for Chat TUIKit", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
## 关于 chat-uikit-engine | ||
chat-uikit-engine 是基于腾讯云 Chat SDK 的封装服务于 Chat UI 的 service(服务)、model(模块) 和 store(数据管理中心),它提供了一些通用的 TUIModel,包含 ConversationModel、MessageModel 等。 | ||
chat-uikit-engine 是腾讯云 Chat TUIKit 的基础库,它同时支持 Web、H5、uni-app、小程序,并且与框架(vuejs, react, react-native, angular等)无关。基于我们精心设计的 Chat TUIKit,您可以快速构建界面优美的、跨平台的、可靠的、可扩展的 Chat 应用。 | ||
## chat-uikit-engine 集成 | ||
chat-uikit-engine 由 service、model 和 store 三大模块组成,其作用如下: | ||
#### 步骤 1:下载 chat-uikit-engine | ||
- service 提供了一系列简化的聊天服务接口,包括切换会话、发送消息等。 | ||
- model 提供了一系列数据模型,如 ConversationModel、MessageModel 等。这些模型类用来管理聊天数据。 | ||
- store 提供了一系列状态管理模块,如会话状态管理、消息状态管理等,帮助开发者更加方便地管理聊天数据。 | ||
## 【安装】 | ||
```shell | ||
@@ -13,3 +19,3 @@ npm install @tencentcloud/chat-uikit-engine | ||
#### 步骤 2:登录 chat-uikit-engine | ||
## 【集成】 | ||
@@ -19,34 +25,21 @@ ```javascript | ||
// login TUIChatEngine | ||
// login to Tencent Cloud Chat | ||
TUIChatEngine.login({ | ||
SDKAppID: xxx, | ||
userID: 'xxx', | ||
userSig: 'xxx', | ||
useUploadPlugin: true, // 是否开启上传插件,true 为开启。即时通信 Chat SDK 发送图片、语音、视频、文件等消息需要使用上传插件,将文件上传到腾讯云对象存储。 | ||
useProfanityFilterPlugin: false, // 是否开启本地审核,true 为开启。使用本地审核功能需要您单独购买该服务,详情参考:https://cloud.tencent.com/document/product/269/79139 | ||
SDKAppID: 0, // 将0替换为您的云通信应用的 SDKAppID,类型为 Number | ||
userID: 'your userID', | ||
userSig: 'your userSig', | ||
// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 true | ||
useUploadPlugin: true, | ||
// 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航 | ||
// 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139 | ||
// 如果您已购买内容审核服务,开启此功能请设置为 true | ||
useProfanityFilterPlugin: false | ||
}); | ||
``` | ||
## chat-uikit-engine 使用 | ||
## 【发送第一条消息】 | ||
### 创建第一个会话 | ||
#### 步骤 1:创建并打开会话 | ||
#### 步骤 1:监听 conversationList | ||
```javascript | ||
import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine'; | ||
// 当触发 conversationList 增/删/置顶/消息免打扰等功能,导致 conversationList 发生变化时,都可以 watch 到新的 conversationList | ||
TUIStore.watch(StoreName.CONV, { | ||
conversationList: (list: Array<IConversationModel>) => { | ||
console.log("conversationList", list); // conversationList<IConversationModel> | ||
}, | ||
}); | ||
``` | ||
#### 步骤 2:创建并打开会话 | ||
创建会话后,**步骤1** 可以监听到更新后的会话列表 | ||
```javascript | ||
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine'; | ||
@@ -65,10 +58,13 @@ | ||
### 发送第一条消息 | ||
#### 步骤 2:监听 messageList | ||
#### 步骤 1:监听 messageList | ||
```javascript | ||
import { TUIStore, StoreName, IMessageModel } from '@tencentcloud/chat-uikit-engine'; | ||
import { | ||
TUIStore, | ||
StoreName, | ||
IMessageModel, | ||
} from '@tencentcloud/chat-uikit-engine'; | ||
// 当接受到新的消息、发送消息、消息删除等,导致 messageList 发生变化时,都可以 watch 获取到新的 messageList | ||
// 收到新消息、发送消息、删除消息等操作都会导致 messageList 发生变更 | ||
// watch messageList,开发者可及时获取到变更后的最新的 messageList | ||
TUIStore.watch(StoreName.CHAT, { | ||
@@ -81,5 +77,5 @@ messageList: (list: Array<IMessageModel>) => { | ||
#### 步骤 2:发送第一条消息 | ||
#### 步骤 3:发送第一条消息 | ||
发送第一条消息后,可以通过 **步骤1** 获取更新后的消息列表 | ||
发送第一条消息后,开发者可以通过 **步骤2** 获取更新后的消息列表。 | ||
@@ -86,0 +82,0 @@ ```javascript |
156748
101