## 关于 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) => { console.log("messageList", list); // messageList }, }); ``` #### 步骤 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 签发方式请参见上文。