@tencentcloud/chat-uikit-engine 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -37
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,50 +1,43 @@
|
|
|
1
1
|
## 关于 chat-uikit-engine
|
|
2
2
|
|
|
3
|
-
chat-uikit-engine
|
|
3
|
+
chat-uikit-engine 是腾讯云 Chat TUIKit 的基础库,它同时支持 Web、H5、uni-app、小程序,并且与框架(vuejs, react, react-native, angular等)无关。基于我们精心设计的 Chat TUIKit,您可以快速构建界面优美的、跨平台的、可靠的、可扩展的 Chat 应用。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
chat-uikit-engine 由 service、model 和 store 三大模块组成,其作用如下:
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- service 提供了一系列简化的聊天服务接口,包括切换会话、发送消息等。
|
|
8
|
+
|
|
9
|
+
- model 提供了一系列数据模型,如 ConversationModel、MessageModel 等。这些模型类用来管理聊天数据。
|
|
10
|
+
|
|
11
|
+
- store 提供了一系列状态管理模块,如会话状态管理、消息状态管理等,帮助开发者更加方便地管理聊天数据。
|
|
12
|
+
|
|
13
|
+
## 【安装】
|
|
8
14
|
|
|
9
15
|
```shell
|
|
10
16
|
npm install @tencentcloud/chat-uikit-engine
|
|
11
17
|
```
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
## 【集成】
|
|
14
20
|
|
|
15
21
|
```javascript
|
|
16
22
|
import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
|
|
17
23
|
|
|
18
|
-
// login
|
|
24
|
+
// login to Tencent Cloud Chat
|
|
19
25
|
TUIChatEngine.login({
|
|
20
|
-
SDKAppID:
|
|
21
|
-
userID: '
|
|
22
|
-
userSig: '
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
### 创建第一个会话
|
|
31
|
-
|
|
32
|
-
#### 步骤 1:监听 conversationList
|
|
33
|
-
|
|
34
|
-
```javascript
|
|
35
|
-
import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine';
|
|
36
|
-
|
|
37
|
-
// 当触发 conversationList 增/删/置顶/消息免打扰等功能,导致 conversationList 发生变化时,都可以 watch 到新的 conversationList
|
|
38
|
-
TUIStore.watch(StoreName.CONV, {
|
|
39
|
-
conversationList: (list: Array<IConversationModel>) => {
|
|
40
|
-
console.log("conversationList", list); // conversationList<IConversationModel>
|
|
41
|
-
},
|
|
26
|
+
SDKAppID: 0, // 将0替换为您的云通信应用的 SDKAppID,类型为 Number
|
|
27
|
+
userID: 'your userID',
|
|
28
|
+
userSig: 'your userSig',
|
|
29
|
+
// 如果您需要发送图片、语音、视频、文件等富媒体消息,请设置为 true
|
|
30
|
+
useUploadPlugin: true,
|
|
31
|
+
// 本地审核可识别、处理不安全、不适宜的内容,为您的产品体验和业务安全保驾护航
|
|
32
|
+
// 此功能为增值服务,请参考:https://cloud.tencent.com/document/product/269/79139
|
|
33
|
+
// 如果您已购买内容审核服务,开启此功能请设置为 true
|
|
34
|
+
useProfanityFilterPlugin: false
|
|
42
35
|
});
|
|
43
36
|
```
|
|
44
37
|
|
|
45
|
-
|
|
38
|
+
## 【发送第一条消息】
|
|
46
39
|
|
|
47
|
-
|
|
40
|
+
#### 步骤 1:创建并打开会话
|
|
48
41
|
|
|
49
42
|
```javascript
|
|
50
43
|
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
|
|
@@ -60,14 +53,17 @@ TUIConversationService.getConversationProfile("C2Cuser1")
|
|
|
60
53
|
});
|
|
61
54
|
```
|
|
62
55
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
#### 步骤 1:监听 messageList
|
|
56
|
+
#### 步骤 2:监听 messageList
|
|
66
57
|
|
|
67
58
|
```javascript
|
|
68
|
-
import {
|
|
69
|
-
|
|
70
|
-
|
|
59
|
+
import {
|
|
60
|
+
TUIStore,
|
|
61
|
+
StoreName,
|
|
62
|
+
IMessageModel,
|
|
63
|
+
} from '@tencentcloud/chat-uikit-engine';
|
|
64
|
+
|
|
65
|
+
// 收到新消息、发送消息、删除消息等操作都会导致 messageList 发生变更
|
|
66
|
+
// watch messageList,开发者可及时获取到变更后的最新的 messageList
|
|
71
67
|
TUIStore.watch(StoreName.CHAT, {
|
|
72
68
|
messageList: (list: Array<IMessageModel>) => {
|
|
73
69
|
console.log("messageList", list); // messageList<IMessageModel>
|
|
@@ -75,9 +71,9 @@ TUIStore.watch(StoreName.CHAT, {
|
|
|
75
71
|
});
|
|
76
72
|
```
|
|
77
73
|
|
|
78
|
-
#### 步骤
|
|
74
|
+
#### 步骤 3:发送第一条消息
|
|
79
75
|
|
|
80
|
-
|
|
76
|
+
发送第一条消息后,开发者可以通过 **步骤2** 获取更新后的消息列表。
|
|
81
77
|
|
|
82
78
|
```javascript
|
|
83
79
|
import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
|