<template>
<div></div>
</template>
<script>
export default {
data() {
return {
websocket: null,
// WebSocket 地址
WebSocket_URL: '',
reconnectTimer:null
};
},
mounted() {
// 调用WebSocket
this.initSysWebsocket();
},
methods: {
initSysWebsocket() {
try {
// 判断浏览器是否支持WebSocket
if ('WebSocket' in window) {
// console.log(this.wsUrl)
// console.log(this.$store.getters.userId)
// 正式环境参数
this.websocket = new WebSocket(this.WebSocket_URL);
// console.log(this.websocket)
this.initWebSocket()
} else {
alert('当前浏览器 不支持')
}
} catch (e) {
// console.log('尝试创建连接失败')
//如果无法连接上webSocket 那么重新连接!可能会因为服务器重新部署,或者短暂断网等导致无法创建连接
this.reConnect()
}
},
reConnect() {
//重连函数
var that = this
// if (this.isConnect) return
this.reconnectTimer && clearInterval(this.reconnectTimer)
// 如果 this.rec 存在,清除与之关联的定时器
this.rec && clearTimeout(this.rec)
// 延迟5秒重连 避免过多次过频繁请求重连
this.rec = setTimeout(function () {
that.initSysWebsocket();
}, 5000)
},
initWebSocket() {
// this.isConnect = true
// 连接错误
this.websocket.onerror = this.setErrorMessage
// 连接成功
this.websocket.onopen = this.setOnopenMessage
// 收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage
// 连接关闭的回调
this.websocket.onclose = this.setOncloseMessage
// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = this.onbeforeunload
},
// 连接错误
setErrorMessage() {
// this.isConnect = false
//调用重连函数
this.reConnect()
console.log('WebSocket连接发生错误 状态码:' + this.websocket.readyState)
},
// 连接成功
setOnopenMessage() {
let that = this
console.log('WebSocket连接成功 状态码:' + this.websocket.readyState)
that.reconnectTimer = setInterval(function () {
console.log('WebSocket发送信息:' + "心跳:" + new Date().toLocaleString())
that.websocket.send('心跳:' + new Date().toLocaleString());
}, 6 * 1000);
},
// 接受消息的回调
setOnmessageMessage(event) {
const dataJson = JSON.parse(event.data);
// console.log('接受的WebSocket参数', dataJson);
},
// 连接关闭的回调
setOncloseMessage() {
// this.isConnect = false
// 重连
this.reConnect()
// console.log("connection closed (" + e.code + ")")
console.log('WebSocket连接关闭 状态码:' + this.websocket.readyState)
},
onbeforeunload() {
this.closeWebSocket()
},
closeWebSocket() {
clearInterval(this.reconnectTimer)
this.websocket.close();
this.websocket.onclose = function (evt) {
console.log("websocket已关闭");
};
},
},
created() {
//绑定事件
window.addEventListener('beforeunload', (e) => this.onbeforeunload());
},
beforeDestroy() {
this.onbeforeunload()
},
};
</script>
<style></style>
01-03
1212
01-05
09-01
2819
05-20
242