TIMSDK/Web/TUIKit

什么是 TUIKit？

TUIKit 是基于 IM SDK 实现的一套 UI 组件，其包含会话、聊天、群组、个人资料等功能，基于 TUIKit 组件您可以像搭积木一样快速搭建起自己的业务逻辑。

如何集成 TUIKit

开发环境要求

• vue3
• TypeScript
• sass（sass-loader 版本<= 10.1.1）

快速搭建

常用的聊天软件都是由会话列表、聊天窗口、群组管理、个人资料等几个基本的界面组成，参考下面步骤，您仅需几行代码即可在项目中快速搭建这些 UI 界面。

步骤1：使用 vue-cli 创建项目。 vue3 + TypeScript + sass

注意：

若创建项目时未安装 sass/scss，则可以在下载完项目后，安装 sass + sass-loader

cd projectName  // 进入您的项目
yarn add sass sass-loader@10.1.1

步骤2：下载 TUIKit

从 GitHub 下载 TUIKit 源码。复制 TUIKit 文件夹放置到自己到工程文件中，例如：

步骤3：生成 usesig

1. 从 GitHub 下载 GenerateTestUserSig 工具包。并复制到项目中，例如：

2. 设置GenerateTestUserSig文件中的相关参数，其中 SDKAppID 和密钥等信息，可通过 即时通信 IM 控制台 获取，单击目标应用卡片，进入应用的基础配置页面。
   

3. 设置GenerateTestUserSig文件中的相关参数，其中 SDKAppID 和密钥等信息，可通过 即时通信 IM 控制台 获取，单击目标应用卡片，进入应用的基础配置页面。

4. 在基本信息区域，单击显示密钥，复制并保存密钥信息至 GenerateTestUserSig 文件。

注意：

本文提到的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

步骤4：下载 TUIKit 组件所需依赖

cd src/TUIKit
yarn install

步骤5：在 main.ts 中，引入 TUIKit，并注册到 vue 项目实例中。

import { TUICore, TUIComponents } from "./TUIKit";
import { genTestUserSig } from "../GenerateTestUserSig";

const config = {
  SDKAppID: 0, // Replace 0 with the SDKAppID of your IM application when connecting. Value type: Number
};
// init TUIKit
const TUIKit = TUICore.init(config);

// TUIKit add TUIComponents
TUIKit.use(TUIComponents);

const userID = 'xxxx'; // User ID
const userInfo = {
  userID: userID,
  userSig: genTestUserSig(userID).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
};
// login TUIKit
TUIKit.login(userInfo);

// register
createApp(App).use(TUIKit).mount("#app");

注意：

SDKAppID 需与GenerateTestUserSig文件中 SDKAppID 一致。

步骤6：在需要展示的页面，调用TUIKit的组件即可使用。

例如：在Home.vue页面中，使用 TUIConversation、TUIChat搭建聊天界面。

<template>
  <div class="home-TUIKit-main">
    <div class="conversation">
      <TUIConversation />
    </div>
    <div class="chat">
      <TUIChat>
        <div class="chat-default">默认显示</div>
      </TUIChat>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
export default class Home extends Vue {}
</script>

<style scoped>
.home-TUIKit-main {
  display: flex;
  height: 800px;
}
.conversation {
  min-width: 285px;
  flex: 0 0 24%;
  border-right: 1px solid #f4f5f9;
}
.chat {
  flex: 1;
  height: 100%;
  position: relative;
}
</style>

步骤7：启动项目

yarn serve

常见问题

1. 如何生成 useSig ？

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

2. Module not found: Error: Can't resolve 'sass-loader'

IM TUIKit web 样式依赖 sass，需在项目全局安装 sass 和 sass-loader

其中 sass-loader 的版本<=10.1.1

yarn add sass sass-loader@10.1.1