管理WS 连接及重连等信息，此文件无需修改，可复用

import Handler from '@/utils/websocketHandler'
/*
Socket.readyState
0 CONNECTING  连接尚未建立
1 OPEN        WebSocket的链接已经建立
2 CLOSING     连接正在关闭
3 CLOSED      连接已经关闭或不可用
*/
let Socket = null
let timer = null // 定时重连
let ws_url = ''
let autoReconnect = true // 定时重连

//* ********************************************************************** 以下内容可复用 ******************/
/**
 * 初始化 启动WS
 * @param {*} url ws地址
 * @returns
 */
const Start = (url) => {
  // 初始化
  if (typeof WebSocket === 'undefined') { return console.log('您的浏览器不支持websocket') }
  Socket && Socket.close()

  console.log('建立websocket连接:' + url)
  ws_url = url
  Socket = new WebSocket(url)
  Socket.onopen = onOpenWS
  Socket.onmessage = onMessageWS
  Socket.onerror = onErrorWS
  Socket.onclose = onCloseWS
}
/**
 * 手动关闭ws(不会触发重连)
 */
const Close = () => {
  console.info('ws 主动关闭')
  timer && clearInterval(timer)
  autoReconnect = false
  Socket && Socket.close()
  autoReconnect = true
}
/**
 * 手动重连
 */
const Reconnect = () => {
  Socket = null
  autoReconnect = false // 暂时关闭自动重连
  Start(ws_url)
  autoReconnect = true
}
/**
 * 连接成功
 */
const onOpenWS = () => {
  console.log('WS-onOpenWS 打开')
  Handler.StateChange(1)
  clearInterval(timer)
  // 发送注册信息
  let data = Handler.GetRegisterInfo()
  SendMessage(data)
}
/**
 * 连接失败重连
 * @param {*} e 错误信息
 */
const onErrorWS = (e) => {
  Socket.close()
  console.log('WS-onErrorWS 错误', e)
  Handler.StateChange(2)
  if (Socket.readyState !== 3) {
    Reconnect()
  }
}
/**
 * 被动关闭 WS
 */
const onCloseWS = () => {
  console.log('WS-onCloseWS 被动关闭')
  Handler.StateChange(0)
  // 重连
  if (autoReconnect) {
    timer && clearInterval(timer)
    timer = setTimeout(() => {
      Reconnect()
    }, 2000)
  }
}

/**
 * 接收数据
 * @param {*} e 错误信息
 */
const onMessageWS = e => {
  console.log('WS-onMessageWS 接收消息', e)
  let data = e.data
  try {
    data = JSON.parse(e.data)
  } catch (e) {
    data = e.data
  }
  Handler.MessageHandler(data) // 交给 MessageHandler
}
/**
 * 发送数据
 * @param {*} message 发送内容
 */
const SendMessage = message => {
  console.log('WS-sendMessage 发送消息', message)
  Socket.send(JSON.stringify(message))
}

export default{
  Start,
  Close,
  Reconnect,
  SendMessage
}

信息处理器

每个项目根据业务不同单独处理

import store from '@/store'
/**
 *  消息处理函数
 * @param {*} message
 */
const MessageHandler = (message) => {
  console.info('MessageHandler', message)
  if (message['type'] === 'getWait') {
    store.dispatch('register/loadList')
  }
  if (message['type'] === 'getdepa') {
    store.dispatch('register/loadList')
  }
}
/**
 * 发送注册信息
 */
const GetRegisterInfo = () => {
  const data = {
    type: 'register',
    source: store.state.register.uid.source,
    data: {
      uid: store.state.register.uid.uid
    }
  }
  return data
}
/**
 * ws 状态变化
 */
const StateChange = (state) => {
  store.commit('register/SET_WS_STATE', state)
}
export default{
  GetRegisterInfo,
  MessageHandler,
  StateChange
}

全局引入

import WS from '@/utils/websocket'
Vue.prototype.$WS = WS
// 页面启动
this.$WS.start('ws:192.168.0.1:2346')
// 发送内容
this.$WS.SendMessage({'type':''})