websocket完整流程使用

先定义相关的方法

import KdxfShare from 'KdxfShare'
import Bus from 'Bus'
let socket = null // 实例对象
let lockReconnect = false // 是否真正建立连接
let timeout = 30 * 1000 // 30秒一次心跳
let timeoutObj = null // 心跳倒计时
let serverTimeoutObj = null // 服务心跳倒计时
let timeoutnum = null // 断开 重连倒计时
let sessionId = 'jjyx'
const initWebSocket = async () => {
  let token = await KdxfShare.getKdxfToken()
  if ('WebSocket' in window) {
    const wsUrl =''
    socket = new WebSocket(wsUrl, token)
    socket.onerror = webSocketOnError
    socket.onmessage = webSocketOnMessage
    socket.onclose = closeWebsocket
    socket.onopen = openWebsocket
  } else {
    throw new Error('您的浏览器不支持websocket，请更换Chrome或者Firefox')
  }
}

// 建立连接
const openWebsocket = e => {
  start()
}

const start = () => {
  // 开启心跳

  timeoutObj && clearTimeout(timeoutObj)
  timeoutObj = setInterval(function () {
    if (socket.readyState == 1) {
      //如果连接正常
      // console.log('正常连接');
    } else {
      //否则重连
      socket.close()
    }
  }, timeout)
}

// 重新连接
const reconnect = () => {
  if (lockReconnect) {
    return
  }
  lockReconnect = true
  // 没连接上会一直重连，设置延迟避免请求过多
  timeoutnum && clearTimeout(timeoutnum)
  timeoutnum = setTimeout(function () {
    // 新连接
    initWebSocket()
    lockReconnect = false
  }, 1000)
}

// 重置心跳
const reset = () => {
  // 清除时间
  clearTimeout(timeoutObj)
  clearTimeout(serverTimeoutObj)
  // 重启心跳
  start()
}

const sendWebsocket = e => {
  socket.send(e)
}

const webSocketOnError = e => {
  initWebSocket()
  reconnect()
}

// 服务器返回的数据
const webSocketOnMessage = e => {
  if (!e) {
    //  // window自定义事件[下面有说明]
    //  window.dispatchEvent(
    //    new CustomEvent("onmessageWS", {
    //      detail: {
    //        data: JSON.parse(e?.data),
    //      },
    //    })
    //  );
    reset()
    return
  }
  Bus.$emit('getWebSocketOnMessage', e.data)
  return e
}

const closeWebsocket = e => {
  reconnect()
}

// 断开连接
const close = () => {
  // WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。
  socket.close()
}
// 具体问题具体分析,把需要用到的方法暴露出去
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close, openWebsocket }

具体调用逻辑

• 初始化

  created() {
    WebSocket.initWebSocket()
    WebSocket.openWebsocket()
    WebSocket.webSocketOnMessage()
    Bus.$on('getWebSocketOnMessage', this.webSocketOnMessage)
  }

• 销毁

  beforeDestroy() {
    WebSocket.close()
  }

• 发送问题

    getAnswer(mess) {
      WebSocket.sendWebsocket(mess)
    }