@tencentcloud/chat-uikit-vue

开发环境要求

• Vue 3
• TypeScript
• sass（sass-loader 版本 <= 10.1.1）
• node（12.13.0 <= node版本 <= 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0）
• npm（建版本请与 node 版本匹配）

TUIKit 源码集成

步骤1：创建项目

推荐使用 vue-cli 方式创建项目， 配置 Vue3 + TypeScript + sass。 如果您尚未安装 vue-cli ，可以在 terminal 或 cmd 中采用如下方式进行安装：

npm install -g @vue/cli@4.5.0 sass sass-loader@10.1.1

通过 vue-cli 创建项目，并选择下图中所选配置项。

vue create chat-example
cd chat-example

步骤2：下载 TUIKit 组件

通过 npm 方式下载 TUIKit 组件并复制到自己工程的 src 目录下：

npm i @tencentcloud/chat-uikit-vue
mkdir -p ./src/TUIKit && cp -r ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit

成功后目录结构如图所示：

步骤3：引入 TUIKit 组件

在 main.ts 中，引入 TUIKit，并注册到 Vue 项目实例中：

import { createApp } from 'vue';
import App from './App.vue';
import { TUIComponents, TUICore, genTestUserSig } from './TUIKit';

const SDKAppID = 0; // Your SDKAppID
const secretKey = ''; //Your secretKey
const userID = ''; // User ID

// init TUIKit
const TUIKit = TUICore.init({
  SDKAppID,
});
// TUIKit add TUIComponents
TUIKit.use(TUIComponents);

// login TUIKit
TUIKit.login({
  userID: userID,
  userSig: genTestUserSig({
    SDKAppID,
    secretKey,
    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
});

createApp(App).use(TUIKit).mount('#app');

步骤4： 生成 UserSig

设置 main.ts 文件示例代码中的相关参数 SDKAppID、secretKey 以及 userID ，其中 SDKAppID 和密钥等信息，可通过 即时通信 IM 控制台 获取，单击目标应用卡片，进入应用的基础配置页面。例如： userID 信息，可通过 即时通信 IM 控制台 进行获取或创建，单击目标应用卡片，进入应用的账号管理页面，即可获取或创建账号以及对应的 userID。例如：

!

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

步骤5：调用 TUIKit 组件

在需要展示的页面，调用 TUIKit 的组件即可使用。 例如：在 App.vue 页面中，使用 TUIConversation、TUIChat、TUISearch 快速搭建聊天界面。

<template>
  <div class="home-TUIKit-main">
    <div :class="env?.isH5 ? 'conversation-h5' : 'conversation'" v-show="!env?.isH5 || currentModel === 'conversation'">
      <TUISearch class="search" />
      <TUIConversation @current="handleCurrentConversation" />
    </div>
    <div class="chat" v-show="!env?.isH5 || currentModel === 'message'">
      <TUIChat>
        <h1>欢迎使用腾讯云即时通信IM</h1>
      </TUIChat>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { TUIEnv } from './TUIKit/TUIPlugin';

export default defineComponent({
  name: 'App',
  setup() {
    const data = reactive({
      env: TUIEnv(),
      currentModel: 'conversation',
    });
    const handleCurrentConversation = (value: string) => {
      data.currentModel = value ? 'message' : 'conversation';
    };
    return {
      ...toRefs(data),
      handleCurrentConversation,
    };
  },
});
</script>

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

步骤6：启动项目

npm run serve

常见问题

1. 如何生成 UserSig？

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

2. Component name "XXXX" should always be multi-word

• IM TUIKit web 所使用的 ESLint 版本为 v6.7.2 ，对于模块名的驼峰式格式并不进行严格校验
• 如果您出现此问题，您可以在 .eslintrc.js文件中进行如下配置：

module.exports = {
  ...
  rules: {
    ...
    'vue/multi-word-component-names': 'warn',
  },
};