插件 signalr.ts 文件

import { provide } from 'vue'

import * as signalR from "@microsoft/signalr";
export default {
    install: (app, options) => {
        console.log("安装执行Signalr")
    
        let connection:signalR.HubConnection|null ;

        let SignalrLogin= (token: string ):void  => {
            debugger;
            connection = new signalR.HubConnectionBuilder()
            .withUrl("/messagehub", {
              accessTokenFactory: () =>
              token,
            })
            .build();
            connection.start().then(() => {
            //connection.invoke("StudentApproval", "hello");
            console.log("上线成功");
            });
            connection.on("Test", (data) => {
                console.log("消息测试", data);
            });
           
        };
        let GetSignalrConnection=():signalR.HubConnection|null=>{
            return connection;
        }

        app.config.globalProperties.$SignalrLogin=SignalrLogin;
        app.config.globalProperties.$GetSignalrConnection=GetSignalrConnection;
       

        app.provide('$SignalrLogin', SignalrLogin)
        app.provide('$GetSignalrConnection', GetSignalrConnection)
      
    }
}

main.ts 注册全局

import signalrPlugin from "./plugins/signalr";
import * as signalR from "@microsoft/signalr";

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {  
    $SignalrLogin: (str: string | null) => void,
    $GetSignalrConnection: () => signalR.HubConnection|null
  }
}

app.use(signalrPlugin,{})

页面使用

<script setup lang="ts">
import {
  ref,
  reactive,
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  inject,
} from "vue";

const signalrLogin: (str: string | null) => void = inject("$SignalrLogin");
const conn: () => signalR.HubConnection | null = inject(
  "$GetSignalrConnection"
);

//事件中调用
async function loginevent() {
signalrLogin(token.data.AccessToken);
}
conn();
</script>