[网络协议]VUE WebSocket

新建webSocket.js文件

let?webSocket?=?null

export?function?warpAndSetWebSocket(ws)?{

??console.log('连接成功')

??if?(webSocket)?{

????try?{

??????webSocket.close()

????}?catch?(error)?{

??????console.log(error)

????}

??}

??ws.onopen?=?function(e)?{

????console.log('open',?e)

????sendMessage('text',?'hello')

??}

??ws.onmessage?=?function(e)?{

????console.log('message',?e.data)

????const?message?=?JSON.parse(e.data)

????const?type?=?message.type

????if?(type?===?'heartbeat')?{

??????//?pass?心跳

????}?else?if?(type?===?'text')?{

??????console.log('message.data',?message.data)

????}

??}

??ws.onclose?=?function(e)?{

????console.log('close',?e)

??}

??ws.onerror?=?function(e)?{

????console.log('错误',?e)

??}

??webSocket?=?ws

}

//?关闭时候调用

export?function?removeAndCloseWebSocket()?{

??console.log('退出登陆')

??if?(webSocket)?{

????try?{

??????webSocket.close()

??????webSocket?=?null

????}?catch?(error)?{

??????console.log(error)

????}

??}

}

//?给后端发送心跳

export?function?sendMessage(type,?data)?{

??let?num?=?''

??for?(var?i?=?0;?i?<?32;?i++)?{

????num?+=?parseInt(Math.random()?*?10)

??}

??const?timestamp?=?new?Date().getTime()

??webSocket.send(JSON.stringify(

????{

??????'id':?num,

??????'timestamp':?timestamp,

??????'type':?type,

??????'data':?data

????}

??))

}

在其他文件里引用

哪里开启哪里引用

console.log('process.env.AUTH_API',?process.env.AUTH_API)

??????????????this.url?=?process.env.AUTH_API.replace('http',?'ws')?+?'/hb-pcc-core/ws/connect?token='?+?this.$store.getters.token

??????????????const?ws?=?new?WebSocket(this.url) // url是后端地址

??????????????warpAndSetWebSocket(ws)

哪里关闭哪里调用连接

removeAndCloseWebSocket()