websocket

websocket及时通讯代替轮询

websocket的直接使用

data() {
  // socket对象
  socket: null,
  config: {
    heartbeat: {
      enabled: true, // 是否发送心跳包
      time: 10000, // 心跳包发送间隔时长
      setInterval: null // 心跳包计时器
    },
    reconnect: {
      lockReconnect: false,
      setTimeout: null, // 计时器对象
      time: 3000, // 重连间隔时间
      number: 50 // 重连次数
    }
  }
}

mounted() {
  // 加载websocket
  this.loadWebsocket()
},

methods: {
  // WebSocket代替轮询
  loadWebsocket() {
    const that = this
    let _token = getToken()
    _token = _token.split(' ')[1]
    that.socket = new WebSocket(
      `${this.$configApiUrl.WebSocket_URL}?token=${_token}`
    )
    that.socket.onerror = (evt) => {
      console.log('webSocket连接失败！')
    }
    that.socket.onopen = (evt) => {
      that.heartbeat()
      console.log('webSocket连接成功！')
    }
    that.socket.onmessage = (evt) => {
    }
    that.socket.onclose = (evt) => {
      if (that.config.heartbeat.enabled) {
        clearInterval(that.config.heartbeat.setInterval)
      }

      if (evt.code === 1006) {
        that.reconnect()
      }
      console.log('webSocket关闭！')
    }
  },
  /**
   * WebSocket心跳检测
   */
  heartbeat() {
    const that = this
    that.config.heartbeat.setInterval = setInterval(function () {
      that.socket.send('heartbeat')
    }, that.config.heartbeat.time)
  },
  /**
   * WebSocket断开重连方法
   */
  reconnect() {
    const that = this
    if (
      that.config.reconnect.lockReconnect ||
      that.config.reconnect.number === 0
    ) {
      return
    }

    that.config.reconnect.lockReconnect = true

    // 没连接上会一直重连，设置延迟避免请求过多
    that.config.reconnect.setTimeout &&
      clearTimeout(that.config.reconnect.setTimeout)

    that.config.reconnect.setTimeout = setTimeout(() => {
      that.loadWebsocket()

      that.config.reconnect.lockReconnect = false

      that.config.reconnect.number--

      const number = that.config.reconnect.number
      console.log(`网络连接已断开，正在尝试重新连接(${number}S)...`)
    }, that.config.reconnect.time)
  }
}

封装websocket

创建一个单独的socket.js文件

import { getToken } from '@/utils/token'
const SOCKET_URL = 'ws://XXX.XXX.XX.XX:XXX/socket.io'

let socket = null
let result = ''
const socketconfig = {
  heartbeat: {
    enabled: true, // 是否发送心跳包
    time: 10000, // 心跳包发送间隔时长
    setInterval: null // 心跳包计时器
  },
  reconnect: {
    lockReconnect: false,
    setTimeout: null, // 计时器对象
    time: 3000, // 重连间隔时间
    number: 50 // 重连次数
  }
}
export function loadWebsocket() {
    let _token = getToken()
    _token = _token.split(' ')[1]
    socket = new WebSocket(
      `${SOCKET_URL}?token=${_token}`
    )
    socket.onopen = function () {
        heartbeat()
        console.log('公共的websocket连接成功')
    }
    socket.onerror = (evt) => {
      console.log('webSocket连接失败！')
    }
    socket.onmessage = (evt) => {
      result = JSON.parse(evt.data)
    }
    socket.onclose = function (evt) {
      // 关闭 websocket
      console.log('连接已关闭...')
      if (socketconfig.heartbeat.enabled) {
        clearInterval(socketconfig.heartbeat.setInterval)
      }

      if (evt.code === 1006) {
        reconnect()
      }
  }
}
/**
   * WebSocket心跳检测
   */
export function heartbeat() {
  socketconfig.heartbeat.setInterval = setInterval(function () {
    socket.send('heartbeat')
  }, socketconfig.heartbeat.time)
}
/**
   * WebSocket断开重连方法
   */
export function reconnect() {
  if (socketconfig.reconnect.lockReconnect || socketconfig.reconnect.number === 0) {
    return
  }

  socketconfig.reconnect.lockReconnect = true

  // 没连接上会一直重连，设置延迟避免请求过多
  socketconfig.reconnect.setTimeout &&
    clearTimeout(socketconfig.reconnect.setTimeout)

  socketconfig.reconnect.setTimeout = setTimeout(() => {
    loadWebsocket()

    socketconfig.reconnect.lockReconnect = false

    socketconfig.reconnect.number--

    const number = socketconfig.reconnect.number
    console.log(`网络连接已断开，正在尝试重新连接(${number}S)...`)
  }, socketconfig.reconnect.time)
}
export function onmessageCallBack() {
  return result
}

在组件里引用

import { loadWebsocket, onmessageCallBack } from '@/utils/socket'

// 在登录后调loadWebsocket连接socket，在发送消息之类的事件后调onmessageCallBack处理数据