websocket+心跳

1.���接上代码

（）

let ws //websocket实例let lockReconnect = false //避免重复连接let wsUrl = ''//初始化websocketgetWebSocketurl()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) return  lockReconnect = 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 = this    this.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.另一种

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 = true      setTimeout(() => {        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.webSocket      const 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.data      if (text.indexOf('pong') > 0) {        return      }      this.$notify.warning({        title: '消息提醒',        dangerouslyUseHTMLString: true,        message: text + '请及时处理',        offset: 60      })    },    /**     * 数据发送     * @param msg     */    send(msg) {      //数据发送      this.webSocket.send(msg)    }  }}

（）