vue 心跳监控_Vue中WebSocket加入心跳机制

最新推荐文章于 2024-08-27 10:52:38 发布

weixin_39883286

最新推荐文章于 2024-08-27 10:52:38 发布

阅读量158

点赞数

文章标签： vue 心跳监控

本文链接：https://blog.csdn.net/weixin_39883286/article/details/112956189

版权

本文介绍了在Vue项目中如何实现WebSocket的心跳监控机制，包括建立连接、重连、心跳检测以及异常处理。通过示例代码展示了一个完整的工作流程，确保了与服务器的稳定通信。

摘要由CSDN通过智能技术生成

import { collectService } from '@/services';

export default {

prop: ['formWhere'],

data() {

return {

dialogPop: false,

isDisabled: true,

webInfo: [],

id: null,

ws: null,//建立的连接

lockReconnect: false,//是否真正建立连接

timeout: 58*1000,//58秒一次心跳

timeoutObj: null,//心跳心跳倒计时

serverTimeoutObj: null,//心跳倒计时

timeoutnum: null,//断开重连倒计时

}

created() {

this.initWebpack();

methods: {

initWebpack(){

const wsurl='wss://XXXXXXX';//ws地址,这里加入自己的地址即可

this.ws = new WebSocket(wsurl);

this.ws.onopen = this.onopen;

this.ws.onmessage = this.onmessage;

this.ws.onclose = this.onclose;

this.ws.onerror = this.onerror;

reconnect() {//重新连接

var that = this;

if(that.lockReconnect) {

return;

};

that.lockReconnect = true;

//没连接上会一直重连，设置延迟避免请求过多

that.timeoutnum && clearTimeout(that.timeoutnum);

that.timeoutnum = setTimeout(function () {

//新连接

that.initWebpack();

that.lockReconnect = false;

},5000);

reset(){//重置心跳

var that = this;

//清除时间

clearTimeout(that.timeoutObj);

clearTimeout(that.serverTimeoutObj);

//重启心跳

that.start();

start(){ //开启心跳

console.log('开启心跳');

var self = this;

self.timeoutObj && clearTimeout(self.timeoutObj);

self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);

self.timeoutObj = setTimeout(function(){

//这里发送一个心跳，后端收到后，返回一个心跳消息，

if (self.ws.readyState == 1) {//如果连接正常

self.ws.send("heartCheck"); //这里可以自己跟后端约定

}else{//否则重连

self.reconnect();

}

self.serverTimeoutObj = setTimeout(function() {

//超时关闭

self.ws.close();

}, self.timeout);

}, self.timeout)

onopen() {

console.log("open");

//开启心跳

this.start();

onmessage(e) {

console.log('接收信息', e);

console.log('接收信息', e.data);

//下面这块代码，接收到后端返回的消息后，根据自己的需求去判断

if(e.data == 'heartCheck'){

// this.webInfo = '';

}else {

let data = JSON.parse(e.data);

if(data && data.length > 0){

let arr = [];

data.forEach(element => {

if(element.collectorId == localStorage.getItem('id')) {

arr.push(element);

return;

}

});

this.webInfo = arr;

console.log('this.webInfo--',this.webInfo);

}

//收到服务器信息，心跳重置

this.reset();

onclose(e) {

console.log("连接关闭");

console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);

//重连

this.reconnect();

onerror(e) {

console.log("出现错误");

//重连

this.reconnect();

onsend(msg) {//向服务器发送信息

//数据发送

this.websock.send(msg);

}

这是本人最终用到的代码，新测真实有效

参考这篇文章

https://blog.csdn.net/kang19980516/article/details/104658081?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-104658081.nonecase&utm_term=vue%E4%B8%AD%20websocket%E5%BF%83%E8%B7%B3%E6%9C%BA%E5%88%B6&spm=1000.2123.3001.4430