Tutorial: 集成指引 - Documentation

关于 chat-uikit-engine

chat-uikit-engine 是基于腾讯云 Chat SDK 的封装服务于 Chat UI 的 service(服务)、model(模块) 和 store(数据管理中心)，它提供了一些通用的 TUIModel，包含 ConversationModel、MessageModel 等。

引入方式

import TUIChatEngine, {
  TUIConversationService,
  TUIChatService,
  TUIGroupService,
  TUIUserService,
  TUITranslateService,
  TUIStore,
} from '@tencentcloud/chat-uikit-engine';

功能说明

TUIChatEngine - 默认导出模块，无 UI 集成时主要负责 Chat SDK 实例化&登录、登出、实例销毁、日志输出控制等基础能力。
TUIConversationService - 主要负责会话相关的业务逻辑。
TUIChatService - 主要负责聊天相关的业务逻辑。
TUIGroupService - 主要负责群组管理相关的业务逻辑。
TUIUserService - 主要负责用户相关的业务逻辑。
TUITranslateService - 主要负责国际化翻译相关的业务逻辑，如果不需要此项能力，可忽略。
TUIStore - 主要负责 TUIChatEngine 层的数据管理。

注意：以上模块根据业务需要按需引入即可。

chat-uikit-engine 集成

步骤 1：下载 chat-uikit-engine

npm install @tencentcloud/chat-uikit-engine

步骤 2：登录 chat-uikit-engine

import TUIChatEngine from '@tencentcloud/chat-uikit-engine';

// login TUIChatEngine
TUIChatEngine.login({
 SDKAppID: xxx,
 userID: 'xxx',
 userSig: 'xxx',
 useUploadPlugin: true, // 是否开启上传插件，true 为开启。即时通信 Chat SDK 发送图片、语音、视频、文件等消息需要使用上传插件，将文件上传到腾讯云对象存储。
});

chat-uikit-engine 使用

创建第一个会话

步骤 1：监听 conversationList

import { TUIStore } from '@tencentcloud/chat-uikit-engine';

// list 为 conversationList，item 为 conversation model，当触发 conversationList 变化时，都可以 watch 到新的 conversationList
TUIStore.watch(StoreName.CONV, {
  conversationList: (list: Array<IConversationModel>) => {
    console.log(list) // conversationList<IConversationModel>
  },
});

步骤 2：创建会话

创建会话后，可以通过 步骤1 获取更新后的会话列表

import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';

 TUIConversationService.getConversationProfile('C2Cuser1').catch((error) => {
   console.log(error);
 });

发送第一条消息

步骤 1：监听 messageList

import { TUIStore } from '@tencentcloud/chat-uikit-engine';

// list 为 messageList 为 message model，当接受到新的消息或发送消息后，都可以 watch 获取到新的 messageList
TUIStore.watch(StoreName.CHAT, {
  messageList: (list: Array<IMessageListModel>) => {
    console.log(list) // messageList<IMessageListModel>
  },
});

步骤 2：发送第一条消息

发送第一条消息后，可以通过 步骤1 获取更新后的消息列表

import { TUIChatService } from '@tencentcloud/chat-uikit-engine';

TUIChatService.sendTextMessage({
  payload: {
    text: 'Hello world!'
  },
}).catch((error) => {
  console.log(error);
});

常见问题

1. 什么是 UserSig？

UserSig 是用户登录即时通信 IM 的密钥，其本质是对 UserID 等信息加密后得到的密文。

2. 如何生成 UserSig？

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见服务端生成 UserSig。

本文示例代码采用的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。正确的 UserSig 签发方式请参见上文。