vue3 使用腾讯IM

马农码字

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

阅读量423

点赞数 3

文章标签： vue.js 前端 javascript

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

版权

参考文档：PC端VUE3腾讯IM
我使用的是vue3+vite+js

引入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这个代表用户登录
    <TUIKit :SDKAppID="0" userID="xxx" userSig="xxx" />
    // TUICallKit聊天页面
    <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

onMounted(() => {
   // 当登录成功后
  emits('handleSwitchConversation', 'C2C' + userId)
  TUIConversationService.switchConversation('C2C' + userId)
})
</script>