websocket+心跳

1.直接上代码

let ws //websocket实例
let lockReconnect = false //避免重复连接
let wsUrl = ''
//初始化websocket
getWebSocketurl()
async function getWebSocketurl() {try {// const data = await getInfo()sid.value = localStorage.getItem('Refresh-Token')wsUrl = `ws://192.168.2.158/webSocket/${sid.value}`createWebSocket(wsUrl)} catch (e) {console.log(e)}
}
//前面都是准备工作
async function createWebSocket(url) {try {ws = new WebSocket(wsUrl) //创建websocket链接initEventHandle() //后续操作} catch (e) {reconnect(url)}
}function initEventHandle() {ws.onclose = function (evnt) {console.log('websocket服务关闭了')reconnect(wsUrl)  }ws.onerror = function (evnt) {console.log('websocket服务出错了')reconnect(wsUrl)}ws.onopen = function (evnt) {console.log('websocket服务开始')sendMsg.value = JSON.stringify(sendMsg.value)ws.send(sendMsg.value)//心跳检测重置heartCheck.reset().start()}ws.onmessage = function (evnt) {//如果获取到消息，心跳检测重置//拿到任何消息都说明当前连接是正常的console.log('websocket服务获得数据了')//接受消息后的UI变化doWithMsg(evnt.data) //收到消息进行页面操作//心跳检测重置heartCheck.reset().start()}//收到消息推送function doWithMsg(msg) {//  收到消息操作页面、、  }function reconnect(url) {if (lockReconnect) returnlockReconnect = true//没连接上会一直重连，设置延迟避免请求过多setTimeout(function () {createWebSocket(url)lockReconnect = false}, 2000)
}//心跳检测
let heartCheck = {timeout: 600000, //60秒timeoutObj: null,serverTimeoutObj: null,reset: function () {clearTimeout(this.timeoutObj)clearTimeout(this.serverTimeoutObj)return this},start: function () {let self = thisthis.timeoutObj = setTimeout(function () {//这里发送一个心跳，后端收到后，返回一个心跳消息，//onmessage拿到返回的心跳就说明连接正常// ws.send('HeartBeat')ws.send(sendMsg.value)self.serverTimeoutObj = setTimeout(function () {//如果超过一定时间还没重置，说明后端主动断开了ws.close() //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次}, self.timeout)}, this.timeout)},
}

2.另一种

<template></template>
<script>
import store from '@/store'export default {props: {uri: {type: String},},data() {return {webSocket: null, // webSocket实例lockReconnect: false, // 重连锁，避免多次重连maxReconnect: 6,  // 最大重连次数， -1 标识无限重连reconnectTime: 0, // 重连尝试次数heartbeat: {interval: 30 * 1000, // 心跳间隔时间timeout: 10 * 1000, // 响应超时时间pingTimeoutObj: null, // 延时发送心跳的定时器pongTimeoutObj: null, // 接收心跳响应的定时器pingMessage: JSON.stringify({type: 'ping'}) // 心跳请求信息}}},computed: {token() {return store.getters.access_token},tenant() {return store.getters.userInfo.tenantId ? store.getters.userInfo.tenantId : 1;}},created() {this.initWebSocket()},destroyed: function () {this.webSocket.close()this.clearTimeoutObj(this.heartbeat)},methods: {/*** 初始化 weoSocket*/initWebSocket() {// ws地址let host = window.location.host;let wsUri = `ws://${host}${this.uri}?access_token=${this.token}&TENANT-ID=${this.tenant}`// 建立连接this.webSocket = new WebSocket(wsUri)// 连接成功this.webSocket.onopen = this.onOpen// 连接错误this.webSocket.onerror = this.onError// 接收信息this.webSocket.onmessage = this.onMessage// 连接关闭this.webSocket.onclose = this.onClose},/*** 重新连接*/reconnect() {if (!this.token) {return}if (this.lockReconnect || (this.maxReconnect !== -1 && this.reconnectTime > this.maxReconnect)) {return}this.lockReconnect = truesetTimeout(() => {this.reconnectTime++// 建立新连接this.initWebSocket()this.lockReconnect = false}, 5000)},/*** 清空定时器*/clearTimeoutObj: function (heartbeat) {heartbeat.pingTimeoutObj && clearTimeout(heartbeat.pingTimeoutObj)heartbeat.pongTimeoutObj && clearTimeout(heartbeat.pongTimeoutObj)},/*** 开启心跳*/startHeartbeat() {const webSocket = this.webSocketconst heartbeat = this.heartbeat// 清空定时器this.clearTimeoutObj(heartbeat)// 延时发送下一次心跳heartbeat.pingTimeoutObj = setTimeout(() => {// 如果连接正常if (webSocket.readyState === 1) {//这里发送一个心跳，后端收到后，返回一个心跳消息，webSocket.send(heartbeat.pingMessage)// 心跳发送后，如果服务器超时未响应则断开，如果响应了会被重置心跳定时器heartbeat.pongTimeoutObj = setTimeout(() => {webSocket.close()}, heartbeat.timeout)} else {// 否则重连this.reconnect()}}, heartbeat.interval)},/*** 连接成功事件*/onOpen() {console.log('WebSocket connection success')//开启心跳this.startHeartbeat()this.reconnectTime = 0},/*** 连接失败事件* @param e*/onError(e) {//错误console.log(`WebSocket connection error：${e.code} ${e.reason} ${e.wasClean}`)//重连this.reconnect()},/*** 连接关闭事件* @param e*/onClose(e) {//关闭console.log(`WebSocket connection closed：${e.code} ${e.reason} ${e.wasClean}`)//重连this.reconnect()},/*** 接收服务器推送的信息* @param msgEvent*/onMessage(msgEvent) {//收到服务器信息，心跳重置并发送this.startHeartbeat()const text = msgEvent.dataif (text.indexOf('pong') > 0) {return}this.$notify.warning({title: '消息提醒',dangerouslyUseHTMLString: true,message: text + '请及时处理',offset: 60})},/*** 数据发送* @param msg*/send(msg) {//数据发送this.webSocket.send(msg)}}
}</script>