腾讯云Web即时通讯搭建

源码介绍:

chat-uikit-vue 是基于腾讯云 Web IM SDK 的一款 VUE UI 组件库,它提供了一些通用的 UI 组件,包含会话、聊天、音视频通话、关系链、资料、群组等功能。基于 UI 组件您可以像搭积木一样快速搭建起自己的业务逻辑。 chat-uikit-vue 中的组件在实现 UI 功能的同时,会调用 IM SDK 相应的接口实现 IM 相关逻辑和数据的处理,因而开发者在使用 chat-uikit-vue 时只需关注自身业务或个性化扩展即可。 chat-uikit-vue Web 端 和 H5 端界面效果如下图所示:

192585298-c79960ed-a6a9-4927-89b9-31c1b3f68740

192585375-6260280f-4a67-4b64-a908-efcedee1c253

本文介绍如何快速集成腾讯云 Web IM SDK 的 VUE UI 组件库。对于其他平台,请参考文档:

chat-uikit-react

chat-uikit-uniapp

chat-uikit-wechat

chat-uikit-ios

chat-uikit-android

chat-uikit-flutter

发送您的第一条消息

开发环境要求

  • 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 版本匹配)

步骤 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

201250381-8fa8d225-f93b-40b3-ad63-48336f9c7244

创建完成后,切换到项目所在目录

cd chat-example

步骤 2:下载 TUIKit 组件

通过 git clone 方式下载 TUIKit 组件及其相关依赖, 为了方便您的后续使用,建议您通过以下命令将整个 chat-uikit-vue 复制到您项目的 src目录下,并重命名为TUIKit:

# 项目根目录命令行执行
git clone https://github.com/TencentCloud/chat-uikit-vue.git

# 移动并重命名到src目录下
# macOS
mv chat-uikit-vue src/TUIKit
# windows
move chat-uikit-vue src\TUIKit

# 进入 TUIKit
cd src/TUIKit

# 安装TUIKit依赖
npm i --legacy-peer-deps

成功后目录结构如图所示:
192585499-1a4edd85-43cc-4527-9f39-494b7d7e625a

步骤 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: 获取 SDKAppID 、密钥与 userID

设置 main.ts 文件示例代码中的相关参数 SDKAppID、secretKey 以及 userID ,其中 SDKAppID 和密钥等信息,可通过 即时通信 IM 控制台 获取,单击目标应用卡片,进入应用的基础配置页面。例如:
192587785-6577cc5e-acf9-423c-86d0-52c67234ab1f

userID 信息,可通过 即时通信 IM 控制台 进行创建和获取,单击目标应用卡片,进入应用的账号管理页面,即可创建账号并获取 userID。例如:
192585588-c5300d12-6bb5-45a4-831b-f7d733573840

步骤 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

步骤 7:发送您的第一条消息

192585549-2cc65785-0d6d-4d48-a0ce-0abe0b927bf4

拨打您的第一通电话

请参考 即时通信 IM – 含 UI 集成方案 – 音视频通话 教程进行搭建。

常见问题

1. 什么是 UserSig?

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

2. 如何生成 UserSig?

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

!

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

3. 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',
  },
};

简单安装方法:

下载https://www.sunzishaokao.com/download/Web-im.zip,执行对应系统的脚本即可

相关文档

© 版权声明
THE END
喜欢就支持一下吧
点赞12.4W+打赏 分享
评论 共3条

请登录后发表评论