<template>
<div></div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
data() {
return {
url: "",
Socket: null, //socket对象
lockReconnect: false, //锁定拒绝重连
close: false, //是否关闭
timer: null, //定时器
// reconnectNum: 3, //重连次数
};
},
created() {
this.connect();
},
beforeDestroy() {
// 页面销毁时关闭连接
this.lockReconnect = true;
this.close = true;
if (this.Socket) {
this.Socket.close(); //关闭链接
this.Socket = null;
}
},
methods: {
// 消息推送WebSocket
connect() {
try {
if ("WebSocket" in window) {
let isPro = process.env.NODE_ENV === "production"; // 正式环境
let urlHead = "ws://";
if (location.protocol === "https:") {
urlHead = "wss://";
}
this.url = isPro
? urlHead +
location.host +
"/websocket/alarm/"
: "ws://10.19.11.111:11111/websocket/alarm/";
// process.env.VUE_APP_WEVSOCKET_PATH;
this.Socket = new WebSocket(this.url + getToken());
}
console.log("正在连接...");
this.initEventHandle();
} catch (err) {
console.log(err, "失败");
}
},
// 监听连接状态+取数据
initEventHandle() {
this.Socket.onclose = (e) => {
this.clearTimer(); //清除定时器
this.reconnect(); //定时重连
console.log(e.target, "连接关闭!" + new Date().toLocaleString());
};
this.Socket.onerror = (e) => {
this.reconnect(); //定时重连
console.log(e.target, "连接错误!");
};
this.Socket.onopen = (e) => {
this.heartCheck(); //心跳检测重置
console.log(e.target, "连接成功!" + new Date().toLocaleString());
};
// 接收数据
this.Socket.onmessage = (e) => {
if (e.data != "pong") {
let data = JSON.parse(e.data);
console.log("数据转换", data);
}
};
},
// 清除定时器
clearTimer() {
clearInterval(this.timer);
this.timer = null;
},
// 断开然后定时重连
reconnect() {
if (this.lockReconnect || this.close) return;
// if (this.reconnectNum >= 3) return; //最多重连三次
this.lockReconnect = true;
setTimeout(() => {
//没连接上会一直重连，设置延迟避免请求过多
// this.reconnectNum++;
this.connect();
this.lockReconnect = false;
}, 500);
},
// 发送心跳检测
heartCheck() {
this.clearTimer();
this.timer = setInterval(() => {
// 三十秒钟发一次心跳包
this.Socket.send("ping");
// console.log("--ping--");
}, 30000);
},
},
};
</script>
<style scoped></style>
