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>