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

通过 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 SDKAppID
    const secretKey = process.env.NODE_ENV === 'development' ? 'rr' : 'kk' // Your secretKey

    // tim登录
    async function BLKTIMLogin() {
        //进行IM登录之前首先验证token
        if (!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文档