vue中SignalR全局封装

一、SignalR

是什么我就不多说了，可自行去官网查阅

二、使用步骤

1.安装signalr,无需安装其他如jquery之类的

cnpm install @aspnet/signalr 

2.新建一个名为signalR.js的文件

import * as signalR from "@aspnet/signalr";
export default {
  SR: {},
  //初始化连接
  initSR: function() {
    let that = this;
    if (!localStorage.userInfo) return;
    let userInfo = JSON.parse(localStorage.userInfo);
    // 1.获取系统中定义的baseURL
    let url = window.PLATFROM_CONFIG.baseURL.replace(/http:/g, "");
    // 2.初始化连接
    that.SR = new signalR.HubConnectionBuilder()
      .withUrl(url + "signalr", {
        accessTokenFactory: () => encodeURI(userInfo.encryptedAccessToken),
      })
      .configureLogging(signalR.LogLevel.Information)
      .build();
    // 3.携带参数
    that.SR.qs = {
      enc_auth_token: encodeURI(userInfo.encryptedAccessToken),
    };
    // 4.启动连接的方法
    async function start() {
      try {
        await that.SR.start();
        console.log("signaR连接成功");
      } catch (err) {
        console.log("err", err);
        setTimeout(start, 5000);
      }
    }
    // 5.关闭之后重连
    that.SR.onclose(async () => {
      await start();
    });
    // 6.启动连接
    start();
  },
  // 停止连接（这个方法好像没啥用，先放着吧）
  stopSR: function() {
    let that = this;
    async function stop() {
      try {
        await that.SR.stop();
        console.log("signaR退出成功");
      } catch (err) {}
    }
    stop();
  },
};

3.在main.js中引入并挂载到全局

import signaR from "signaR的路径";
Vue.prototype.signaR = signaR;

4.初始化
我的需求是登陆之后连接服务器，所以我将初始化连接(initSR)的步骤放在了登陆成功获取到token时

this.signaR.initSR();

但同时我又发现，当界面刷新时，由main.js中全局挂载的signaR会消失，所以需要在App.vue中再初始化一遍

  mounted() {
    // 初始化signaR连接
    this.signaR.initSR()
  },

5.使用
我的需求是订阅服务器中getNotification这个主题，当服务器那边任务处理完成时，就会给我发送一条消息，我拿到这条消息并根据消息内容进行下面的工作

  mounted() {
    this.signaR.SR.on('getNotification', function (notification) {
      // 接收后要做的事
      console.log('getNotification', notification)
    })
  }

特别注意：当此组件生命周期结束时，记得销毁注册的这个方法，不然会导致重复触发上面这个回调（我尝试了官网中所用的off方法，无效，所以自己手动清空这个数组，有更好的方法麻烦也告知一下）

  destroyed() {
    // 手动销毁此主题，不然会反复订阅，反复触发getnotification
    this.signaR.SR.methods.getnotification = []
  },