即时通信 IM 集成聊天工具（Vue3 桌面版）

chat-uikit-vue3 介绍
chat-uikit-vue3 是基于腾讯云 Chat SDK 的一款 vue3 UI 组件库，它提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。 chat-uikit-vue3 界面效果如下图所示：
效果如下图所示：
﻿
开发环境要求
vue3
TypeScript
node（node.js ≥ 18.0.0）
chat-uikit-vue3 集成
步骤1：创建项目
1. 创建一个新的名称为 chat-example 的 Vue3 项目，您可自行选择是否需要使用 ts 模板。
npm create vite@latest
﻿
2. 创建项目完成后，切换到项目所在目录。
cd chat-example
npm install
步骤2：下载 chat-uikit-vue3 组件
npm i @tencentcloud/chat-uikit-vue3
步骤3：引入 chat-uikit-vue3 组件
注意：
以下代码中未填入 SDKAppID、userID 和 userSig，需在 步骤4 中获取相关信息后进行替换。
为了尊重版权，下图所示的默认小黄脸表情包版权属于腾讯云，您可以通过升级至 IM 企业版套餐 免费使用该表情包。
﻿
﻿
﻿
例如：在 App.vue 页面中实现以下代码，即可快速搭建聊天界面：
<template>
  <UIKitProvider language="zh-CN">
    <div class="chat-layout">
      <div class="sidebar" style="width: 300px;">
        <div class="tab-header">
          <button 
            :class="['tab-button', { active: activeTab === 'conversations' }]"
            @click="activeTab = 'conversations'"
          >
            会话
          </button>
          <button 
            :class="['tab-button', { active: activeTab === 'contacts' }]"
            @click="activeTab = 'contacts'"
          >
            联系人
          </button>
        </div>
        
        <div class="tab-content">
          <ConversationList v-if="activeTab === 'conversations'" />
          <ContactList v-else />
        </div>
      </div>
      
      <Chat style="flex: 1;" v-if="activeTab === 'conversations'">
        <ChatHeader />
        <MessageList />
        <MessageInput />
      </Chat>
      <ContactInfo v-else  style="flex: 1;"  @send-message="handleSendMessage" />
    </div>
  </UIKitProvider>
</template>
﻿
<script setup lang="ts">
import { ref } from 'vue';
import {
  ConversationList,
  Chat,
  MessageList,
  MessageInput,
  ChatHeader,
  ContactList,
  ContactInfo,
  UIKitProvider,
  useLoginState,
} from '@tencentcloud/chat-uikit-vue3';
﻿
const { login } = useLoginState();
const activeTab = ref<'conversations' | 'contacts'>('conversations');
﻿
login({
  sdkAppId : 0, // SDKAppID, 可以参考步骤 4 获取
  userId: 'xxx', // UserID, 可以参考步骤 4 获取
  userSig: 'xxx', // userSig, 可以参考步骤 4 获取
})
.then(() => {})
.catch(() => {});
const handleSendMessage = () => {
  activeTab.value = 'conversations';
}
</script>
<style>
#app{margin:0;padding:0;text-align:left;}.chat-layout{width:100vw;height:100vh;display:flex;}.sidebar{display:flex;flex-direction:column;border-right:1px solid #e5e7eb;}.tab-header{display:flex;border-bottom:1px solid #e5e7eb;}.tab-button{flex:1;padding:12px 16px;background:none;border:none;cursor:pointer;font-size:14px;color:#6b7280;transition:all 0.2s;}.tab-button.active{color:#3b82f6;background-color:#eff6ff;border-bottom:2px solid #3b82f6;}.tab-content{flex:1;overflow:hidden;}
</style>
步骤4：获取 SDKAppID、userID 和 userSig
参数
类型
说明
SDKAppID
Number
SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在 即时通信 IM 控制台 创建新应用，获取 SDKAppID 。
说明：
SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID
String
用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。
userSig
String
用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
说明：
开发环境：快速跑通 Demo，可以通过 即时通信 IM 控制台 获取 UserSig。
生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口， 正确的 UserSig 签发方式请参见 服务端生成 UserSig。
注意：
本文示例代码采用在即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见服务端生成 UserSig。
SDKAppID：在 即时通信 IM 控制台 > 应用管理 单击创建新应用，获取 SDKAppID。
﻿
userID：单击 即时通信 IM 控制台 > 消息服务 Chat > 账号管理，切换至目标应用所在账号，即可创建账号并获取 UserID。
﻿
userSig：单击 即时通信 IM 控制台 > 开发工具 > UserSig生成校验，切换至目标应用所在账号，填写创建的 UserID，即可生成 UserSig。
﻿
步骤5：启动项目
 npm run dev
注意：
1. 请确保 步骤3 代码中  SDKAppID、userID 和 userSig 均已成功替换，如未替换将会导致项目表现异常。
2. userID 和 userSig  为一一对应关系，具体参见 生成 UserSig。
3. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
步骤6：发送您的第一条消息
1. 项目启动成功后，切换到联系人，点击添加好友。
2. 在输入框中搜索另一个用户的 userID（参考：步骤4 > 创建账号并获取 userID）。
3. 添加好友成功后，打开好友列表，发送消息。
4. 在输入框输入消息，按下 enter 键发送。
常见问题
什么是 UserSig？
UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
如何生成 UserSig？
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
注意：
本文示例代码采用在 即时通信 IM 控制台 获取 UserSig 的方案，该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见 服务端生成 UserSig。
官网文档：
﻿自定义组件 - UIKitProvider﻿
﻿自定义组件 - ConversationList﻿
﻿自定义组件 - MessageList﻿
﻿自定义组件 - MessageInput﻿
﻿自定义组件 - ChatSetting﻿
﻿自定义组件 - ContactList﻿
﻿自定义组件 - Search﻿
NPM 包：
﻿chat-uikit-vue3 npm﻿
GitHub：
﻿GitHub Demo﻿
技术支持：
如遇任何问题，可联系 官网售后 反馈，享有专业工程师的支持，解决您的难题。
﻿
﻿

参数	类型	说明
SDKAppID	Number	SDKAppID 是腾讯云 IM 客户应用的唯一标识。您可以在即时通信 IM 控制台创建新应用，获取 SDKAppID 。说明： SDKAppID 是腾讯云 IM 客户应用的唯一标识。我们建议每一个独立的 App 都申请一个新的 SDKAppID。不同 SDKAppID 之间的消息是天然隔离的，不能互通。
userID	String	用户的唯一标识符，由您定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。
userSig	String	用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。说明：开发环境：快速跑通 Demo，可以通过即时通信 IM 控制台获取 UserSig。生产环境：将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，正确的 UserSig 签发方式请参见服务端生成 UserSig。

集成聊天工具（Vue3 桌面版）

本页目录：

chat-uikit-vue3 介绍

开发环境要求

chat-uikit-vue3 集成

步骤1：创建项目

步骤2：下载 chat-uikit-vue3 组件

步骤3：引入 chat-uikit-vue3 组件

例如：在 App.vue 页面中实现以下代码，即可快速搭建聊天界面：

步骤4：获取 SDKAppID、userID 和 userSig

步骤5：启动项目

步骤6：发送您的第一条消息

常见问题

什么是 UserSig？

如何生成 UserSig？

官网文档：

NPM 包：

GitHub：

技术支持：