|
|
|
@ -32,13 +32,32 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
timeout: 1000 |
|
|
|
socket: null, |
|
|
|
lockReconnect: false, // 避免重复连接 |
|
|
|
heartCheck: { |
|
|
|
timeout: 3000, |
|
|
|
timeoutobj: null, |
|
|
|
serverTimeoutObj: null, |
|
|
|
start: function() { |
|
|
|
const that = this |
|
|
|
clearTimeout(this.timeoutObj) |
|
|
|
clearTimeout(this.serverTimeoutObj) |
|
|
|
this.timeObj = setTimeout(function() { |
|
|
|
// 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong |
|
|
|
this.socket.send('ping') |
|
|
|
that.serverTimeoutObj = setTimeout(function() { |
|
|
|
this.socket.close() |
|
|
|
}, that.timeout) |
|
|
|
}, this.timeout) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.initWebSocket() |
|
|
|
}, |
|
|
|
// created() { |
|
|
|
// this.openSocket() |
|
|
|
// }, |
|
|
|
mounted() { |
|
|
|
this.openSocket() |
|
|
|
this.getData() |
|
|
|
console.log(11333) |
|
|
|
this.$nextTick(() => { |
|
|
|
@ -59,9 +78,6 @@ export default { |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearInterval(this.timer) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getData() { |
|
|
|
this.tableData = data1.rows |
|
|
|
@ -109,120 +125,40 @@ export default { |
|
|
|
} |
|
|
|
}, 1000 * 3 * this.scollNum) |
|
|
|
}, |
|
|
|
initWebSocket() { |
|
|
|
const wsUri = process.env.VUE_APP_WS_API + '/webSocket' |
|
|
|
this.websock = new WebSocket(wsUri) |
|
|
|
this.websock.onerror = this.webSocketOnError |
|
|
|
this.websock.onmessage = this.webSocketOnMessage |
|
|
|
}, |
|
|
|
webSocketOnError(e) { |
|
|
|
this.$notify({ |
|
|
|
title: 'WebSocket连接发生错误', |
|
|
|
type: 'error', |
|
|
|
duration: 0 |
|
|
|
}) |
|
|
|
}, |
|
|
|
webSocketOnMessage(e) { |
|
|
|
const data = JSON.parse(e.data) |
|
|
|
console.log(data) |
|
|
|
if (data.msgType === 'INFO') { |
|
|
|
this.$notify({ |
|
|
|
title: '', |
|
|
|
message: data.msg, |
|
|
|
type: 'success', |
|
|
|
dangerouslyUseHTMLString: true, |
|
|
|
duration: 5500 |
|
|
|
}) |
|
|
|
} else if (data.msgType === 'ERROR') { |
|
|
|
this.$notify({ |
|
|
|
title: '', |
|
|
|
message: data.msg, |
|
|
|
dangerouslyUseHTMLString: true, |
|
|
|
type: 'error', |
|
|
|
duration: 0 |
|
|
|
}) |
|
|
|
openSocket() { |
|
|
|
if (!('WebSocket' in window)) { |
|
|
|
console.log('您的浏览器不支持WebSocket') |
|
|
|
} else { |
|
|
|
console.log('您的浏览器支持WebSocket') |
|
|
|
const socketUrl = process.env.VUE_APP_WS_API + '/webSocket' |
|
|
|
if (this.socket != null) { |
|
|
|
this.socket.close() |
|
|
|
this.socket = null |
|
|
|
} |
|
|
|
this.socket = new WebSocket(socketUrl) |
|
|
|
// 打开事件 |
|
|
|
this.socket.onopen = () => { |
|
|
|
console.log('websocket已经打开') |
|
|
|
// 心跳检测重置 |
|
|
|
this.heartCheck.start() |
|
|
|
} |
|
|
|
// 获得消息 |
|
|
|
this.socket.onmessage = (msg) => { |
|
|
|
console.log(msg) |
|
|
|
// 对返回数据进行处理 |
|
|
|
this.heartCheck.start() |
|
|
|
} |
|
|
|
// 关闭事件 |
|
|
|
this.socket.onclose = function() { |
|
|
|
console.log('websocket已关闭') |
|
|
|
} |
|
|
|
// 发生了错误事件 |
|
|
|
this.socket.onerror = function(e) { |
|
|
|
console.log('websocket发生了错误') |
|
|
|
console.log(e) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
webSocketSend(agentData) { |
|
|
|
this.websock.send(agentData) |
|
|
|
} |
|
|
|
// initWebSocket() { |
|
|
|
// // if (WebSocket in window) { |
|
|
|
// // 初始化weosocket |
|
|
|
// const wsUri = process.env.VUE_APP_WS_API + '/webSocket' |
|
|
|
// this.websocket = null |
|
|
|
// this.websocket = new WebSocket(wsUri) |
|
|
|
// this.websocket.onopen = this.websocketonopen |
|
|
|
// this.websocket.onerror = this.websocketonerror |
|
|
|
// this.websocket.onmessage = this.websocketonmessage |
|
|
|
// this.websocket.onclose = this.websocketclose |
|
|
|
// // } else { |
|
|
|
// // // 浏览器不支持 WebSocket |
|
|
|
// // console.log('您的浏览器不支持 WebSocket!') |
|
|
|
// // } |
|
|
|
// }, |
|
|
|
// websocketonopen() { |
|
|
|
// this.start() |
|
|
|
// }, |
|
|
|
// start() { |
|
|
|
// // 开启心跳 |
|
|
|
// const that = this |
|
|
|
// that.timeoutObj && clearTimeout(that.timeoutObj) |
|
|
|
// that.timeoutObj = setTimeout(function() { |
|
|
|
// // 这里发送一个心跳，后端收到后，返回一个心跳消息， |
|
|
|
// if (that.websocket && that.websocket.readyState === 1) { |
|
|
|
// // 如果连接正常 |
|
|
|
// console.log('WebSocket连接成功') |
|
|
|
// that.websocket.send('----timingHeart---') |
|
|
|
// } else { // 否则重连 |
|
|
|
// that.reconnect() |
|
|
|
// } |
|
|
|
// }, that.timeout) |
|
|
|
// }, |
|
|
|
// reconnect() { // 重新连接 |
|
|
|
// console.log('重新连接') |
|
|
|
// const that = this |
|
|
|
// if (that.websocket && that.websocket.readyState === 1) { |
|
|
|
// clearInterval(that.timeoutnum) |
|
|
|
// that.timeoutnum = null |
|
|
|
// that.timeNum = 0 |
|
|
|
// return |
|
|
|
// } |
|
|
|
// if (!that.timeoutnum) { |
|
|
|
// that.timeoutnum = setInterval(function() { |
|
|
|
// if (that.websocket && that.websocket.readyState === 1) { |
|
|
|
// clearInterval(that.timeoutnum) |
|
|
|
// that.timeoutnum = null |
|
|
|
// that.timeNum = 0 |
|
|
|
// return |
|
|
|
// } |
|
|
|
// // 新连接 |
|
|
|
// that.initWebSocket() |
|
|
|
// that.timeNum++ |
|
|
|
// if (that.timeNum >= 3) { |
|
|
|
// clearInterval(that.timeoutnum) |
|
|
|
// that.timeoutnum = null |
|
|
|
// that.timeNum = 0 |
|
|
|
// } |
|
|
|
// }, 1000) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// websocketonerror(e) { |
|
|
|
// // 错误 |
|
|
|
// // this.initWebSocket() |
|
|
|
// console.log('WebSocket连接发生错误') |
|
|
|
// }, |
|
|
|
// websocketonmessage(e) { |
|
|
|
// // 数据接收 |
|
|
|
// var data = JSON.parse(e.data) |
|
|
|
// // this.$store.commit('SET_ws', data) |
|
|
|
// console.log('接收数据', data) |
|
|
|
// // 操作处理... |
|
|
|
// }, |
|
|
|
// websocketclose(e) { |
|
|
|
// // 关闭 |
|
|
|
// this.websocket && this.websocket.close && this.websocket.close() |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
