Asp.net core SignalR + Vue

简介:

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>