vue3 使用腾讯IM

马农码字

已于 2024-11-19 18:10:16 修改

阅读量900

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-08-01 15:51:36 首次发布

本文链接：https://blog.csdn.net/qq_43384836/article/details/140849389

版权

我使用的是vue3+vite+js

聊天

参考文档：
PC端VUE3腾讯IM
客户端api

引入ts，因为TUIKit 仅支持 ts 环境运行

npm install -D typescript

下载TUIKit 组件

npm i @tencentcloud/chat-uikit-vue

xcopy .\node_modules\@tencentcloud\chat-uikit-vue .\src\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-vue\excluded-list.txt

引入TUIKit 组件

<template>
  <div id="app">
    <TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" />
    <TUICallKit class="callkit-container" :allowedMinimized="true" :allowedFullScreen="false" />
  </div>
</template>
<script lang="ts" setup>
import { TUIKit } from './TUIKit';
import { TUICallKit } from '@tencentcloud/call-uikit-vue';
</script>
<style lang="scss">
</style>

SDKAppID 信息，可通过即时即时通信 IM 控制台获取；
userID 信息，可通过单击即时通信 IM 控制台 -【账号管理】，切换至目标应用所在账号，即可创建账号并获取 userID；
userSig 信息，可单击即时通信 IM 控制台 > 开发工具 > UserSig生成&校验，填写创建的 userID，即可生成 userSig。

eslint 因为我用的js eslint导致引入TUIKit组件会疯狂报错！所以要取消校验
.eslintignore

/src/TUIKit

单聊（我们的项目需要1V1聊天，然后我就去扒了他组件的代码，哈哈哈哈哈）

<template>
  <div id="app">
    <TUICallKit class="callkit-container" :allowed-minimized="true" :allowed-full-screen="false" />
  </div>
</template>
<script setup>
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import { TUICallKit } from '@tencentcloud/call-uikit-vue'
import { onMounted } from 'vue'
const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
const userId = 'xxxxxx' // 用户ID
</script>

客服

文档地址：
腾讯IM文档
 客服客户端api
步骤跟聊天基本差不多

下载TUIKit 组件

npm i @tencentcloud/chat-uikit-vue

xcopy .\node_modules\@tencentcloud\chat-uikit-vue .\src\TUIKit /i /e /exclude:.\node_modules\@tencentcloud\chat-uikit-vue\excluded-list.txt

引入TUIKit 组件

<template>
  <div id="app">
    <TUIKit
      :style="{ width: '500px', height: '800px', margin: '0 auto', boxShadow: '0 11px 20px #ccc' }"
      :SDKAppID="YOUR_SDKAppID"
      userID="YOUR_USERID"
      userSig="YOUR_USERSIG"
      conversationID="C2C@customer_service_account"
    >
      <TUIChat><h1>Welcome to Tencent Cloud Chat</h1></TUIChat>
    </TUIKit>
  </div>
</template>
<script setup>
import { TUIKit, TUIChat } from "./TUIKit";
import TUIChatEngine from '@tencentcloud/chat-uikit-engine'
import { TUILogin } from '@tencentcloud/tui-core'
import { framework } from '@/TUIKit/adapter-vue'
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine'
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine'
const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
// 方法
const isReady = TUIChatEngine.isReady() // Ready为true 说明已登录

// 登录
TUILogin.login({
  SDKAppID,
  userID,
  userSig,
  useUploadPlugin: true,
  framework,
}).then(() => {
 
})

// 建立聊天
emits('handleSwitchConversation', 'C2C' + conversationID)
TUIConversationService.switchConversation('C2C' + conversationID)

// 设置语言
TUITranslateService.changeLanguage('en') // zh 语言切换，有设置则按照设置来，没有则按照控制台对应的语言系统

// 退出登录
TUIChatEngine.logout().then(() => {
})
</script>
<style lang="scss"></style>