WebSocket

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      websock: null, //建立的连接
      lockReconnect: false, //是否真正建立连接
      timeout: 20 * 1000, //20秒一次心跳
      timeoutObj: null, //心跳心跳倒计时
      serverTimeoutObj: null, //心跳倒计时
      timeoutnum: null, //断开 重连倒计时
    }
  },
  created() {
    // //页面刚进入时开启长连接
    this.initWebSocket()
  },
  destroyed() {
    //页面销毁时关闭长连接
    this.websocketclose()
  },
  methods: {
    initWebSocket() {
      //建立连接
      //初始化weosocket
      const wsuri = 'ws://localhost:9998/echo'
      //建立连接
      this.websock = new WebSocket(wsuri)
      //连接成功
      this.websock.onopen = this.websocketonopen
      //连接错误
      this.websock.onerror = this.websocketonerror
      //接收信息
      this.websock.onmessage = this.websocketonmessage
      //连接关闭
      this.websock.onclose = this.websocketclose
    },

    websocketonopen() {
      //连接成功事件
      this.websocketsend('发送数据')
      //提示成功
      console.log('连接成功', 3)
      //开启心跳
      this.start()
    },

    start() {
      //开启心跳
      var self = this
      self.timeoutObj && clearTimeout(self.timeoutObj)
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
      self.timeoutObj = setTimeout(function () {
        //这里发送一个心跳，后端收到后，返回一个心跳消息
        if (self.websock.readyState == 1) {
          //如果连接正常
          self.websock.send('heartbeat')
        } else {
          //否则重连
          self.reconnect()
        }
        self.serverTimeoutObj = setTimeout(function () {
          //超时关闭
          self.websock.close()
        }, self.timeout)
      }, self.timeout)
    },

    websocketonmessage(event) {
      //接收服务器推送的信息
      //打印收到服务器的内容
      console.log('收到服务器信息', event.data)
      let data = event.data
      //收到服务器信息，心跳重置
      this.reset()
    },

    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()
    },

    websocketonerror(e) {
      //连接失败事件
      //错误
      console.log('WebSocket连接发生错误')
      //重连
      this.reconnect()
    },
    websocketclose(e) {
      //连接关闭事件
      //提示关闭
      console.log('连接已关闭')
      //重连
      this.reconnect()
    },

    websocketsend(msg) {
      //向服务器发送信息
      this.websock.send(msg)
    },
  },
}
</script>

<style scoped></style>

blog.51cto.com/u_13206321/…