至今头条

SignalR + Vue

2024-08-17 21:00 由 巨大的石头 发表于 #前端开发

简介：

ASP.NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。本文主要讲述如何在Vue.js中使用SignalR，以及断开重连。

知识点：

  • 前端
    • SignalR的安装
    • 如何设置自动重新连接的次数
    • SignalR有关连接的函数
    • 自动重连全部失败后，定时重连
  • ASP.NET CORE
    • SignalR的注册
    • 消息的接收，发送

SignalR的安装

  • SignalR包的安装：在Vue的项目目录下，执行cmd命令：npm install @microsoft/signalr 
  • Vue中引用：import * as signalR from "@microsoft/signalr";

如何设置自动重新连接的次数

  • 如果想要设置自动重新连接的次数，你可以在创建SignalR连接时使用withAutomaticReconnect方法并传入一个重试计时数组，例如：[0, 2000, 4000, 6000]

SignalR有关连接的函数

  • onreconnecting ： 第一次断开连接触发
  • onreconnected：重新连接成功触发
  • onclose：自动重连全部失败后触发

执行效果：初始化失败后重新初始化，重连失败后自动重连

  • 初始化失败后，定时重新初始化直至初始化成功
  • 断开连接后自动重连4次
  • 4次重连失败后，重新初始化

前端代码

  • <template>
  <div>234678
  </div>
</template>

<script>
import * as signalR from  '@microsoft/signalr';
export default {
  name: 'ChartControl',
  data()
  {
    return {
      connection: null,//连接
      intervalId:0,//setInterval ID
      autoReconnectTimerArray:[0, 2000, 4000, 6000],//重试计时数组
      reconnectInterval:5000//5秒
    }
  },
  created()
  {
    
    this.connection = new signalR.HubConnectionBuilder().withUrl('http://localhost:5138/hubs/msgHub')
    .withAutomaticReconnect(this.autoReconnectTimerArray).build();
    this.connection.start().then(() => {
        console.log('初始连接成功');
      }).catch(err => {
           console.log('SignalR Connection Error: ', err)
          this.intervalId=setInterval(()=>{
            this.connection.start().then(() => {
              console.log('初始化连接成功');
              clearInterval(this.intervalId);
            }).catch(
              err=>{
                console.log("初始化连接失败,5秒后重新初始化")
              }
            )
          },this.reconnectInterval)
          
        }
      );
    //重连之前调用 （只有在掉线的一瞬间，只进入一次）
    this.connection.onreconnecting(error=> {
        console.log("第一次掉线，重新连接");
      });
      //(默认4次重连)，任何一次只要回调成功，调用
    this.connection.onreconnected(connectionId => {
        console.log("重新连接成功");
      });
    //(默认4次重连) 全部都失败后，调用
    this.connection.onclose(error => {
        console.log("重新初始化连接:");
        this.intervalId=setInterval(()=>{
            this.connection.start().then(() => {
              console.log('初始化连接成功');
              clearInterval(this.intervalId);
            }).catch(
              err=>{
                console.log("初始化连接失败,5秒后重新初始化")
              }
            )
          },this.reconnectInterval)
    });

    this.connection.on('ReceiveMessage', message => {
        console.log(message);
      });
  }
}

</script>