Solve the problem:
Due to computer sleep, network instability and other reasons, websocket data push of real-time monitoring page is broken, and data is no longer updated in real time.
Objective and Effect:
If the Websocket is disconnected, reconnect it immediately. If the websocket is still disconnected, reconnect it one minute later until the connection succeeds.
Note: Normal destruction of WebSockets when switching pages is excluded from this mechanism. You can determine whether to reconnect by setting timerFlagWS and the status code e.code when it is off.
Code:
let websock = null let socketTimer = null let socketParam = { type: 'test' } export default { name: 'test', data () {return {socketUrl: 'ws://IP:PORT', timerWS: null, // for ws reconnecting timerCountWS: 0, // used for reconnection count, 0- start reconnection immediately, non-0-1min reconnection once. timerFlagWS: }}, mounted () {this.initwebSocket ()}, TimerFlagWS = false this.timerCountws = 0 clearTimeout(this.timerws) if (websock! == null) { websock.close() websock = null } clearTimeout(socketTimer) }, methods: { initWebsocket () { if (typeof WebSocket ! == 'undefined') {this.timerCountws+ + // Websocket = new Websocket (this.socketurl) websock.onopen = this.websocketonopen websock.onclose = this.websocketclose websock.onerror = this.websocketonerror websock.onmessage = this.webSocketonMessage} else {// The browser does not support Websocket protocol this.$message.info(' the browser does not support Websocket protocol, Chrome or Firefox is recommended! ')}}, // open webSocketonOpen () {console.log(' webSocketonopen [test]') this.timerCountws = 0 this.threadpoxi ()}, // Close webSocketclose (e) {console.log(e, 'websocketclose [test]') let self = this if (self.timerCountWS === 0) { if (self.timerFlagWS && e.code === 1006) self.initWebsocket() console.log('websocket reconnect:[test ' + self.timerCountWS + ']', self.timerFlagWS) } else { clearTimeout(self.timerWS) self.timerWS = setTimeout(() => { if (self.timerFlagWS && e.code === 1006) self.initWebsocket() console.log('websocket reconnect:[test ' + self.timerCountWS + ']', self.timerFlagWS) }, 60000)}}, // Error webSocketonerror (e) {console.log(' webSocketonerror [test]')}, // Receive data from webSocketonMessage (e) {let res = json.parse (e.ata) console.log(res, 'WebSocket push result ')}, If (websock.readyState === websock.open) {console.log(' websock.open, '); websock.send start... [test]') self.webSocketSend (socketParam)} else if (websocket.readyState === Websocket.connecting) {// Wait 300 milliseconds if the websocket.connecting state is being opened Console. log('websock.CONNECTING, please wait 300ms... [test]') clearTimeout(socketTimer) socketTimer = setTimeout(() => { self.threadPoxi() }, Websocket console.log(' websocket is not open, wait for reboot... [test]') self.initwebSocket ()}}, // send webSocketSend (param) {websock.send(json.stringify (param))}}Copy the codeSupplement:
The websocket request address is written dead here and should be configured in the nginx.config file using the Nginx proxy.
See: juejin. Cn/post / 698953…