WebSocket使用,实现长连接，组件间通信

1.概述

前端使用vue+antdesign,应用的场景，用户二次登录踢下线。

2.代码

<template>
  <a-locale-provider :locale="locale">
    <!-- <a-spin :spinning="showLoading"> -->
    <div id="app">
      <router-view />
    </div>
    <!-- </a-spin> -->
  </a-locale-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { AppDeviceEnquire } from '@/utils/mixin'
import { State_Info, CorpId } from '@/store/mutation-types'
import Vue from 'vue'
import { mapActions } from 'vuex'
import { WS_SOCKET, ACCESS_TOKEN, REMEMBER_ME, WS_Unique_Identification } from '@/store/mutation-types'
import { getUserInfo, REMOVE_ACCESS_TOKEN_Name } from '@/utils/util'
import bus from '@/utils/bus'
export default {
  mixins: [AppDeviceEnquire],
  data() {
    return {
      delayTime: 20000,
      websocket: null,
      locale: zhCN,
      lockReconnect: false, //是否真正建立连接
      timeout: 30 * 1000, //30秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null //断开 重连倒计时
    }
  },
  computed: {
    showLoading: function() {
      window.console.log('showLoading:', this.$store.getters.showLoading)
      return this.$store.getters.showLoading
    }
  },
  created() {
    //页面刚进入时开启长连接
    this.initWebSocket()
  },
  destroyed: function() {
    //页面销毁时关闭长连接
    this.websocketclose()
  },
  mounted() {
    //关闭浏览器时候，断开websocket
    window.onbeforeunload = () => {
      this.websocketclose()
    }
  },
  beforeCreate: function() {
    document.getElementsByTagName('body')[0].className = 'bodyclass'
    document.getElementsByTagName('html')[0].className = 'htmlclass'
  },
  methods: {
    ...mapActions(['Logout']),
    initWebSocket() {
      const userInfo = getUserInfo()
      console.log('initWebSocket2: ')
      if ('WebSocket' in window && userInfo) {
        if (
          this.$router.history.pending &&
          this.$router.history.pending.path &&
          this.$router.history.pending.path.startsWith('/user/login') === false
        ) {
          if (this.$router.history.pending.meta && this.$router.history.pending.meta.corpid && this.$router.history.pending.meta.appcode) {
            this.websocket = new WebSocket(
              this.WebsocketAddress +
                `/websocket/proxyws/websocket/${this.$router.history.pending.meta.appcode}/${userInfo.id}/${Vue.ls.get(
                  this.$router.history.pending.meta.appcode + '_' + WS_Unique_Identification
                )}?Company-Id=${this.$router.history.pending.meta.corpid}`
            )
            console.log('this.DesignAppWebwebsocket', this.websocket)
            this.handleWebsocket()
          }
          if (this.$router.history.pending.meta && this.$router.history.pending.meta.corpid && this.$router.history.pending.meta.appcode === null) {
            this.websocket = new WebSocket(
              this.WebsocketAddress +
                `/websocket/proxyws/websocket/${'AppWeb'}/${userInfo.id}/${Vue.ls.get('AppWeb_' + WS_Unique_Identification)}?Company-Id=${
                  this.$router.history.pending.meta.corpid
                }`
            )
            console.log('this.AppWebwebsocket', this.websocket)
            this.handleWebsocket()
          }
        }
      }
    },
    handleWebsocket() {
      this.websocket.onopen = this.websocketonopen
      this.websocket.onerror = this.websocketonerror
      this.websocket.onmessage = (e) => {
        //数据接收 保持与后端的通信， 约定：前端 ping 后端 pong
        if (e.data === 'pong') {
          this.reset()
        } else {
          const redata = JSON.parse(e.data)
          console.log('redata: ', redata)
          Vue.ls.set('WS_SOCKET', e.data)
          if (redata === -1) {
            window.webSocket.close()
            //踢下线
            this.$info({
              title: '用户二次登录',
              content: '您的账号被其他用户登录！',
              onOk: () => {
                this.Logout({}).then(() => {
                  window.location.reload()
                })
              }
            })
          } else {
            bus.$emit('on_wsmsg', redata)
            //收到服务器信息，心跳重置
            this.reset()
          }
        }
      }
      this.websocket.onclose = this.websocketclose
      window.webSocket = this.websocket
    },
    websocketonopen() {
      console.log('WebSocket连接成功')
      //开启心跳
      this.start()
    },
    websocketonerror(e) {
      //错误
      console.log('WebSocket连接发生错误')
      //重连
      this.reconnect()
    },
    websocketsend(agentData) {
      //数据发送
      this.websocket.send(agentData)
    },
    websocketclose(e) {
      //关闭
      console.log('connection closed')
    },

    reconnect() {
      //重新连接
      var that = this
      if (that.lockReconnect) {
        return
      }
      that.lockReconnect = true
      //没连接上会一直重连，设置延迟避免请求过多
      that.timeoutnum && clearTimeout(that.timeoutnum)
      that.timeoutnum = setTimeout(function() {
        //新连接
        that.initWebSocket()
        that.lockReconnect = false
      }, 5000)
    },
    reset() {
      //重置心跳
      var that = this
      //清除时间
      clearTimeout(that.timeoutObj)
      clearTimeout(that.serverTimeoutObj)
      //重启心跳
      that.start()
    },
    start() {
      //开启心跳
      var self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      self.timeoutObj = setTimeout(function() {
        //这里发送一个心跳，后端收到后，返回一个心跳消息，
        if (self.websocket.readyState == 1) {
          //如果连接正常
          self.websocket.send('ping')
        } else {
          //否则重连
          self.reconnect()
        }
        // self.serverTimeoutObj = setTimeout(function() {
        //   //超时关闭
        //   self.websocket.close()
        //   console.log('self.timeout')
        // }, self.timeout)
      }, self.timeout)
    }
  }
}
</script>

3.总结

1.心跳机制，如果长时间不与后端沟通ws会断开连接。
2.解决方式，数据接收保持与后端的通信， 约定：前端 ping 后端 pong。
3.在用户登录界面已经与后端ws建立连接，但是在路由跳转或者页面刷新的时候会断开连接，所有在App.vue 根组件中重新连接。
4.其他组件接收ws消息，通过bus

import Vue from 'vue'
const bus = new Vue()
export default bus

  bus.$emit('on_wsmsg', redata)

 created() {
    this.$bus.$on('on_wsmsg', this.onWSmessage)
  }

  beforeDestroy() {
    window.console.log('销毁页面消息监听')
    this.$bus.$off('on_wsmsg', this.onWSmessage)
    window.console.log('删除文件上传组件')
    ;(this.$refs['papapapsjjadhfkhasdgfkhasgdf'] as any).$destroy()
    ;(this.$refs['423b1336-510f-4497-9761-d0bb8f3d4ef9'] as any).$destroy()
  }