Vue3+TypeScript使用signalR通信

1、下载依赖

npm install @aspnet/signalr

2、引用 依赖

import * as signalR from "@microsoft/signalr";

3、创建链接并添加token，http为请求地址

  const connection = new signalR.HubConnectionBuilder()
  .withUrl(http+"/event", {
    accessTokenFactory:()=>{               
           let t ="Bearer "+token
           return t ;    
       },
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets,
        
   })
  .build();

4、添加通信开始和结束事件

async function start() {
    try {
        await connection.start();
        console.log("SignalR Connected.通信开始");
    } catch (err) {
        console.log(err,'通信报错');
        if(isLogin.value){
            console.log('重新链接')
            setTimeout(start, 5000);
        }else{
            connection.stop();//窗口关闭断开通信
        }
    }
};

// 断线重连
connection.onclose(async () => {
      console.log('断开连接了????????????')
      if(isLogin.value){
        console.log('重新链接')
        await start();
      }else{
        connection.stop();//窗口关闭断开通信
      }
});

5、监听通信事件

//监听有新的通知
connection.on("事件名称",(message) =>{
  console.log('有反馈意见被处理',message)

    ElNotification({
            title: '通知消息',
            message: '有反馈意见被处理，请及时跟进！',
            duration: 10000,
    })
})

6、页面加载完成后连接通信以及页面销毁后的断开通信

//页面初始化时
onMounted(() => {
    start();
})
//窗口销毁后
onUnmounted(() => {
  
    connection.stop();//窗口关闭断开通信
})