vue signalR封装刷新问题-退出连接

 mounted() {
    //与 API 互动
    let that=this;
    let _connection = this.signalr
    // console.log(_connection)
    _connection.SR.on('stacker', function (data) {
      //console.log(that.region,'99')
      that.getTunnel1();
    })
    _connection.SR.on('frie', function (data) {
      that.clickFire();
    })
  },

实时连接后页面会不断的刷新，在切换其它页面后再加来时页面会闪。这是因为新旧线程一直在跑导致，所有在页面切换后当前页面的连接就要关掉，一是浪费资源，二来导致页面加载存在问题。
解决方案：在页面关闭时销毁组件：

beforeDestroy(){
    let _connection = this.signalr
    _connection.SR.off('stacker')
    _connection.SR.off('frie')
  },

signalR 封装

import * as signalR from '@microsoft/signalr'
import store from '../store'
import {getToken} from '@/utils/auth'
import {Notification} from 'element-ui'

export default {
  // signalR对象
  SR: {},
  // 失败连接重试次数
  failNum: 4,
  baseUrl: '',
  init(url) {
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(url, {accessTokenFactory: () => getToken()})
      .withAutomaticReconnect()//自动重新连接
      .configureLogging(signalR.LogLevel.Information)
      .build();
    this.SR = connection;
    // 断线重连
    connection.onclose(async () => {
      console.log('断开连接了')
      console.assert(connection.state === signalR.HubConnectionState.Disconnected);
      // 建议用户重新刷新浏览器
      await this.start();
    })

    connection.onreconnected(() => {
      console.log('断线重新连接成功')
    })
    this.receiveMsg(connection);
    // 启动
    // this.start();
  },
  /**
   * 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
   * @returns
   */
  async start() {
    var that = this;

    try {
      //使用async和await 或 promise的then 和catch 处理来自服务端的异常
      await this.SR.start();
      //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
      console.log('signalR 连接成功了', this.SR.state);
      return true;
    } catch (error) {
      that.failNum--;
      console.log(`失败重试剩余次数${that.failNum}`, error)
      if (that.failNum > 0) {
        setTimeout(async () => {
          await this.SR.start()
        }, 5000);
      }
      return false;
    }
  },
  // 接收消息处理
  receiveMsg(connection) {
    connection.on("onlineNum", (data) => {
      store.dispatch("socket/changeOnlineNum", data);
    });
    // 接收欢迎语
    connection.on("welcome", (data) => {
      console.log('welcome', data)
      Notification.info(data)
    });
    // 接收后台手动推送消息
    connection.on("receiveNotice", (title, data) => {
      Notification({
        type: 'info',
        title: title,
        message: data,
        dangerouslyUseHTMLString: true,
        duration: 0
      })
    })
    // 接收系统通知/公告
    connection.on("moreNotice", (data) => {
      if (data.code == 200) {
        store.dispatch("socket/getNoticeList", data.data);
      }
    })
    connection.on('stacker_2', (data) => {
      console.log(data)
    })
  }
}