巨大的石頭

• 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>