当前位置：首页 > news >正文

web端已有项目集成含UI腾讯IM

news 2025/7/26 8:46:50

通过 npm 方式下载 TUIKit 组件，将 TUIKit 组件复制到自己工程的 src 目录下：

npm i @tencentcloud/chat-uikit-vue
mkdir -p ./src/TUIKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/chat-uikit-vue/ ./src/TUIKit

js 工程如何接入 TUIKit 组件?

vue add typescript

在需要使用的页面

<template><TUIKit></TUIKit>
</template>
<script setup lang="ts">
import { ref} from "vue";
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
const currentConversationID = ref<string>("");
TUIStore.watch(StoreName.CONV, {currentConversationID: (id: string) => {currentConversationID.value = id;},
});
</script>

使用pinia,定义一个tim store @/store/tim.js

import { defineStore } from 'pinia'
import store from '@/store'
import { useUserStore } from '@/store/user'
import TencentCloudChat from '@tencentcloud/chat';
import { genTestUserSig, TUIChatKit } from '../TUIKit'
import router from '@/router'
import {TUIChatService, TUIUserService
} from '@tencentcloud/chat-uikit-engine'
import { TUILogin } from '@tencentcloud/tui-core'
export const useTimStore = defineStore('useTimStore', () => {let userStore = useUserStore();const SDKAppID = process.env.NODE_ENV === 'development' ? 123 :234 // Your SDKAppIDconst secretKey = process.env.NODE_ENV === 'development' ? 'rr' : 'kk' // Your secretKey// tim登录async function BLKTIMLogin() {//进行IM登录之前首先验证tokenif (!localStorage.getItem('token_blk')) {// 没有token 跳转登录页router.push('/login')} else {// 验证token是否有效userStore.getInfo().then(async res => {if (res && res.code == 200) {let userInfo = res.data.info;console.log("userInfo->", userInfo)await TUILogin.login({SDKAppID,userID: userInfo.name,userSig: genTestUserSig({SDKAppID,secretKey,userID: userInfo.name,}).userSig,useUploadPlugin: true,framework: 'vue3'}).then(res => {setTimeout(() => {TUIUserService.updateMyProfile({nick: userInfo.name,avatar: userInfo.avatar,profileCustomField: [{key: "Tag_Profile_Custom_ID",value: userInfo.id}, {key: "Tag_Profile_Custom_Email",value: userInfo.email}, {key: "Tag_Profile_Custom_Phone",value: userInfo.phone}]})}, 2000);}).catch(err => {console.error("loginIm-error->", err)})} else if (res && res.code == 401) {router.push('/login')localStorage.removeItem('token_blk')} else {router.push('/login')}}).catch(err => {router.push('/login')})}}// tim登出function TIMLoginOut() {TUILogin.logout();}//   to:消息接收方的 userID 或 groupID，// conversationType：会话类型，取值TencentCloudChat.TYPES.CONV_C2C(端到端会话) 或 TencentCloudChat.TYPES.CONV_GROUP  // type：自定义常量// extension:消息内容 json字符串格式function TIMSendCustomMessage(to, type, extension, conversationType, description) {const options = {to: to,conversationType: conversationType ? conversationType : TencentCloudChat.TYPES.CONV_GROUP,payload: {data: type,description: description,extension: extension},}return new Promise((resolve, reject) => {TUIChatService.sendCustomMessage(options).then(res => {console.log('im发送成功->', res);resolve('success')}).catch(err => {console.warn('im发送失败->', err);reject('error')})})}let keyword = '';return { isLoginIM, SDKAppID, secretKey, BLKTIMLogin, TIMLoginOut, TIMSendCustomMessage, keyword }
})// 非setup
export function useTimStoreHook() {return useTimStore(store)
}

在 main.ts/main.js 中引入登录模块，并进行登录

import { createApp } from 'vue'
import App from './App.vue'
import { useTimStore } from '@/store/tim'
import { TUIComponents, TUIChatKit } from './TUIKit'const app = createApp(App)let TimStore = useTimStore();TUIChatKit.components(TUIComponents, app)
TUIChatKit.init()
TimStore.BLKTIMLogin();

腾讯IM sdk文档

查看全文

http://www.lryc.cn/news/396500.html