websocket使用及心跳检测
该websocket已经全部封装好了,可以直接拉到一个新文件中去进行使用,记得修改websocket地址
data() {
return {
lockReconnect: false,
websocket: null,
sendTimeoutObj: null,
serverTimeoutObj: null,
reconnectTimeoutObj: null,
}
}
methods: {
createSocket(){
console.log('初始化')
this.lockReconnect = false
this.websocket = new WebSocket(`ws://xxxxxxxxx`,`request.header头,若需要token,可以将token写在此处`)
this.init()
},
init(){
this.websocket.onopen = ()=>{
console.log('open')
this.websocketonopen()
}
this.websocket.onmessage = (event)=>{
console.log(event,'onmessage')
this.websocketonmessage(event)
}
this.websocket.onclose = ()=>{
console.log('onclose')
this.websocketonclose()
}
this.websocket.onerror = ()=>{
console.log('onerror')
this.websocketonerror()
}
},
websocketonopen() {
this.heartCheckStart()
},
websocketonmessage(event){
if(event.data == 'heartCheck'){
console.log('心跳正常连接')
}else {
console.log('获取到成功数据,关闭socket连接')
this.destroyWebSocket()
return
}
this.heartCheckStart()
},
websocketonclose(){
this.reconnect()
},
websocketonerror(){
this.reconnect()
},
heartCheckStart(){
console.log('心跳检测启动')
let that = this
that.sendTimeoutObj && clearTimeout(that.sendTimeoutObj)
that.serverTimeoutObj && clearTimeout(that.serverTimeoutObj)
that.sendTimeoutObj = setTimeout(()=>{
if(that.websocket.readyState==1){
console.log('用websocket发送检测测试')
that.websocket.send('heartCheck')
}
that.serverTimeoutObj = setTimeout(()=>{
console.log('5s超时关闭sorket')
that.websocket.close()
},5000)
},3000)
},
reconnect() {
if (this.lockReconnect) return
console.log('重新连接~~~~~~~~~~!!!!!!!!')
this.reconnectTimeoutObj = setTimeout(()=>{
this.websocket.close()
this.createSocket()
},2000)
},
destroyWebSocket() {
if (this.websocket) {
console.log('this.websocket.readyState====>');
this.lockReconnect = true
clearTimeout(this.sendTimeoutObj)
clearTimeout(this.serverTimeoutObj)
clearTimeout(this.reconnectTimeoutObj)
this.sendTimeoutObj = null
this.serverTimeoutObj = null
this.reconnectTimeoutObj = null
this.websocket.close()
console.log('离开网页,关闭websock~~~~~~~~~~');
}
},
}
mounted() {
this.createSocket()
},
beforeDestroy() {
console.log('销毁')
this.destroyWebSocket()
}