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文档地址

相关推荐
万邦科技Lafite2 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
一只小透明啊啊啊啊4 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友5 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao5 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪6 小时前
函数组件和异步组件
前端·javascript·面试
淮北4946 小时前
html + css +js
开发语言·前端·javascript·css·html
麦麦大数据6 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
你的人类朋友6 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式