一、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 = []
},
