Vue中webSocket写法总结

前言：vue项目中，我们常会使用websocket实现长连接，实时更新页面数据状态，那么封装一个实用的websocekt就尤为重要，以下是本人项目过程中，针对websocket进行的封装，仅供学习参考，如果大家有更好的方案，欢迎留言分享。

 在vue项目的utils文件夹下，新建websocket.js文件，如下：

let limitConnect = 3
let timeConnect = 0
let timerWs = null

let Socket = ''
// 缓存ip
let ip = ''
/**
 * 建立websocket连接
 * @param {string} url ws地址
 */
export const createSocket = url => {
  ip = url
  Socket = new WebSocket(url)
  // 发送心跳
  Socket.onopen = onopenWS
  // 接收消息
  Socket.onmessage = onmessageWS
  // 断开重连
  Socket.onclose = oncloseWS
}

// 断开连接
export const closeSoket = () => {
  if (Socket.readyState === 1) {
    Socket.close()
    Socket = null
  }
}

/** 打开WS之后发送心跳 */
const onopenWS = () => {
  sendPing()
}

/** WS数据接收统一处理 （通过事件订阅处理）*/
const onmessageWS = e => {
  window.dispatchEvent(
    new CustomEvent('onmessageWS', {
      detail: {
        data: e.data
      }
    })
  )
}

/** 断开重连 */
const oncloseWS = () => {
  reconnectWs()
}
/**
 * @description 重连机制
 */
const reconnectWs = () => {
  if (limitConnect > 0) {
    limitConnect--
    timeConnect++
    console.log(`第${timeConnect}次重连`)
    setTimeout(() => {
      createSocket(ip)
    }, 2000)
  } else {
    console.log('webSocket连接超时')
  }
}

/**
 * 发送数据
 * @param {any} message 需要发送的数据
 */
export const sendWSPush = message => {
  return new Promise((reslove, reject) => {
    Socket.send(JSON.stringify(message))
    reslove(Socket.readyState)
  })
}

/** 发送心跳
 * @param {number} time 心跳间隔毫秒10s 默认5min=5*60s 1s=1000ms
 * @param {string} ping 心跳名称 默认字符串ping
 */
export const sendPing = (time = 1000 * 10, ping = 'ping') => {
  if (timerWs) {
    clearInterval(timerWs)
    timerWs = null
  }
  timerWs = setInterval(() => {
    Socket.send(ping)
  }, time)
}

// Socket.readyState状态码：0:正在连接；1:连接成功，可以通信  2：表示连接正在关闭 3：表示连接已经关闭，或者打开连接失败

 页面中调用：

//引入创建websocket的方案
import { createSocket } from '../../utils/webscoket' 
//在data中定义一个变量：
data(){
return{
  getSocketData:null
}
}
//在methods中写个方法initWebsSocket,在mounted初始化websocket
initWebsSocket() {
      const wsUrl="ws:xxx:xxx:xxx:xxx:xxxx"
      createSocket(wsUrl)
      // 创建接收消息函数
      this.getSocketData = e => {
        const data = e && e.detail.data
        // 如果不是连接成功的心跳数据，弹出提示
        if (data !== 'pong') {
          this.handleNotifyMsg(data)  //处理消息的函数
        }
      }
      // 注册监听事件
      window.addEventListener('onmessageWS', this.getSocketData)
    },

注意在页面 destroyed中的移除消息处理监听

destroyed() {
    // 移除监听器
    window.removeEventListener('onmessageWS', this.getSocketData)
  },

如果不做封装，可以参考以下用法使用：