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>