后端服务器宕机或重启时，前端Vue 不断重连webSocket的解决办法：
问题重现：后台服务重启时，前端连接的webScoket就断了，需要刷新页面才能重新建立连接，这样用户体验的效果不好，而且有些业务场景，比如硬件监控系统大屏这些是不允许刷新页面的，所以需要前端发现webSocket断了，然后自己不断去发起连接。
解决思路：在webSocket的生命周期onclose和onerror时调用重连函数，增加心跳检测。
「解决方案：」 1.创建变量
data() {
return {
// webSocket对象
webSocket: null,
// webSocketUrl地址
webSocketUrl: null,
//连接标识 避免重复连接
isConnect: false,
//断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
rec: null,
// 心跳发送/返回的信息
checkMsg: {hhh: 'heartbeat'},
//每段时间发送一次心跳包 这里设置为20s
timeout: 20000,
//延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
timeoutObj: null,
}
}
2.创建webSocket连接
//创建webSocket连接
createWebSocket() {
let that = this;
that.webSocket = new WebSocket(that.webSocketUrl);
that.initWebsocket();
}
3.初始化webSocket连接
initWebsocket() {
let that = this;
//WebSocket连接建立之后会调用onopen方法
that.webSocket.onopen = that.websocketonopen;
//当websocket收到服务器发送的信息之后 会调用onmessage方法
that.webSocket.onmessage = that.websocketonmessage;
//当websocket因为各种原因（正常或者异常）关闭之后，会调用onclose方法
that.webSocket.onclose = that.websocketclose;
//当websocket因为异常原因（比如服务器部署、断网等）关闭之后，会调用onerror方法
//在onerror中需要调用reConnect方法重连服务器
that.webSocket.onerror = that.websocketonerror;
}
4.websocketonopen函数
websocketonopen() {
let that = this;
console.log('open');
//连接建立后修改标识
that.isConnect = true;
// 建立连接后开始心跳
// 因为nginx一般会设置例如60s没有传输数据就断开连接 所以要定时发送数据
that.timeoutObj = setTimeout(function() {
if (that.isConnect)
that.webSocket.send(that.checkMsg);
}, that.timeout);
}
5.websocketonerror函数
websocketonerror() {
let that = this;
console.log('error');
//连接断开后修改标识
that.isConnect = false;
//连接错误 需要重连
that.reConnect();
}
6.websocketonmessage函数
websocketonmessage(e) {
// 拿到数据，处理自己的业务
let that = this;
console.log(e.data);
//获取消息后 重置心跳
clearTimeout(that.timeoutObj);
that.timeoutObj = setTimeout(function() {
if (that.isConnect)
that.webSocket.send(that.checkMsg); },
that.timeout);
}
7.websocketclose函数
websocketclose() {
let that = this;
console.log('close');
//连接断开后修改标识
that.isConnect = false;
//连接错误 需要重连
that.reConnect();
}
8.定义重连函数
reConnect() {
let that = this;
console.log('尝试重新连接');
//如果已经连上就不在重连了
if (that.isConnect) {
return;
}
clearTimeout(that.rec);
// 延迟5秒重连 避免过多次过频繁请求重连
that.rec = setTimeout(function() {
that.createWebSocket(); }, 5000);
}
如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料 大厂面试真题免费获取，希望能够对你们有所帮助。
