vue3集成腾讯IM(无UI)教程

前言:由于一些项目需要集成IM,但是不需要UI,网上的教程比较少,所以分享一下我是如何集成的,希望各位一起讨论最佳方案。

集成@tencentcloud/chat

bash 复制代码
npm i @tencentcloud/chat

创建Chat插件

ts 复制代码
import MonoChat from './index.vue'
import TencentCloudChat from "@tencentcloud/chat";
import type { ChatSDK } from '@tencentcloud/chat'
import type { App, InjectionKey, Plugin } from "vue";
export const chatKey = Symbol() as InjectionKey<ChatSDK>
interface Options {
    appId: number,
    logLevel?: number
}
export const createChat = (options: Options): Plugin => {
    return {
        install: (app: App) => {
            if (!options.appId) {
                throw new Error('chat-plugin: 请传appId')
            }
            const chat = TencentCloudChat.create({
                SDKAppID: options.appId
            })
            chat.setLogLevel(options.logLevel || 0);
            app.provide(chatKey, chat)
        }
    }
}

export default MonoChat

集成到main.ts

ts 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { createChat } from './components/MonoChat'
const chat = createChat({
    appId: import.meta.env.VITE_IM_SDK_APP_ID,
    logLevel: import.meta.env.VITE_IM_SDK_APP_LOG_LEVEL
})
createApp(App).use(chat).mount('#app')

创建ChatUI组件

ts 复制代码
<script setup lang="ts">
import { inject, onMounted, onUnmounted } from "vue";
import { chatKey } from "./index";
import TencentCloudChat from "@tencentcloud/chat";

defineOptions({
  name: "ChatUI",
});
const userId = "";
const userSig = "";
const chat = inject(chatKey);
const onMessageReceived = (event: any) => {
  console.log(event);
};

onMounted(() => {
  chat?.login({ userID: userId, userSig });
  chat?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
});
onUnmounted(() => {
  chat?.destroy();
  chat?.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
});
</script>
<template>
  <div>ChatUI</div>
</template>
<style lang="less" scoped></style>

SDK文档地址

相关推荐
liweisum4 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
该用户已不存在5 分钟前
2025 年,Python工具别只知道Pycharm了
前端·后端·python
每天开心10 分钟前
噜噜旅游App(4)——搜索页面开发教程:热门推荐与关键词搜索模块
前端·前端框架
前端赵哈哈11 分钟前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
ybr22 分钟前
基于react-router-dom, view transition 实现路由切换过渡动效
前端
饮茶三千23 分钟前
FreeMarker在保险电子保单/保函模板中的应用
前端·后端
前端的日常25 分钟前
提升开发效率,VSCode 中的两大神器
前端
掘金0126 分钟前
vue父子组件处理异步操作
前端
前端拿破轮26 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
月亮css26 分钟前
vue3页面缓存,使用keep-alive的include不生效
前端