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

适用场景
独立集成私信聊天（1V1）或者群聊（Group），例如房产中介咨询、电商在线客服、保险远程定损等。
﻿
开发环境要求
vue3
TypeScript
node（Node.js ≥ 18.0.0）
集成指引
步骤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 相关组件
在 App.vue 页面中实现以下代码，即可快速搭建聊天界面并开启指定会话：
说明：
conversationID：会话 ID。会话 ID 组成方式如下：
C2C${userID}（单聊），例如 C2C123456。
GROUP${groupID}（群聊），例如 GROUP123456。
<template>
  <div class="app">
      <UIKitProvider language="zh-CN">
        <Chat style="flex: 1;">
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
      </UIKitProvider>
  </div>
</template>
<script lang="ts" setup>
import {
  Chat,
  MessageList,
  MessageInput,
  ChatHeader,
  UIKitProvider,
  useLoginState,
  useConversationListState,
} from '@tencentcloud/chat-uikit-vue3';
﻿
const { login } = useLoginState();
const { setActiveConversation } = useConversationListState();
const conversationID="YOUR_CONVERSATIONID"; // 参考说明设置您需要的会话 ID。
﻿
// 会话 ID 格式：
// C2C${userID}   (单聊，例如: C2C123456)
// GROUP${groupID} (群聊，例如: GROUP123456)
﻿
login({
  sdkAppId : 0, // SDKAppID, 可以参考步骤 4 获取
  userId: 'xxx', // UserID, 可以参考步骤 4 获取
  userSig: 'xxx', // userSig, 可以参考步骤 4 获取
})
.then(() => {
    setActiveConversation(conversationID)
    console.log('IM 登录成功，并已设置目标会话');
})
.catch(() => {
   console.error('IM 登录失败:', error);
});
</script>
<style lang="scss">
.app {
  width: 100vw;
  height: 100vh;
  display: flex;
}
</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. 如遇到项目启动失败，请检查 开发环境要求 是否满足。
相关文档与资源
官网文档：
﻿自定义组件 - 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 桌面版）

本页目录：

适用场景

开发环境要求

集成指引

步骤1：创建项目

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

步骤3：仅引入 Chat 相关组件

在 App.vue 页面中实现以下代码，即可快速搭建聊天界面并开启指定会话：

步骤4：获取 SDKAppID、userID 和 userSig

步骤5：启动项目

相关文档与资源

官网文档：

npm 包：

GitHub：

技术支持：