简介:
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>