vue使用websocket封裝

1. 創建websocket.js

const WSS_URL = `wss://wss.xxxx.com/ws?appid=xxx`
let Socket = ''
let setIntervalWesocketPush = null

/**建立連接 */
export function createSocket() {
  if (!Socket) {
    console.log('建立websocket連接')
    Socket = new WebSocket(WSS_URL)
    Socket.onopen = onopenWS
    Socket.onmessage = onmessageWS
    Socket.onerror = onerrorWS
    Socket.onclose = oncloseWS
  } else {
    console.log('websocket已連接')
  }
}
/**打開WS之後發送心跳 */
export function onopenWS() {
  sendPing() //發送心跳
}
/**連接失敗重連 */
export function onerrorWS() {
  clearInterval(setIntervalWesocketPush)
  Socket.close()
  createSocket() //重連
}
/**WS數據接收統一處理 */
export function onmessageWS(e) {
  window.dispatchEvent(new CustomEvent('onmessageWS', {
    detail: {
      data: e
    }
  }))
}
/**發送數據
 1. @param eventType
 */
export function sendWSPush(eventTypeArr) {
  const obj = {
    appId: 'airShip',
    cover: 0,
    event: eventTypeArr
  }
  if (Socket !== null && Socket.readyState === 3) {
    Socket.close()
    createSocket() //重連
  } else if (Socket.readyState === 1) {
    Socket.send(JSON.stringify(obj))
  } else if (Socket.readyState === 0) {
    setTimeout(() => {
      Socket.send(JSON.stringify(obj))
    }, 3000)
  }
}
/**關閉WS */
export function oncloseWS() {
  clearInterval(setIntervalWesocketPush)
  console.log('websocket已斷開')
}
/**發送心跳 */
export function sendPing() {
  Socket.send('ping')
  setIntervalWesocketPush = setInterval(() => {
    Socket.send('ping')
  }, 5000)
}

2. 組件中調用

import { createSocket, sendWSPush } from './api/websocket'

createSocket() //創建
sendWSPush(11111) //發送數據

//監聽ws數據響應
const getDataFunc = function(e) {
  console.log(e.detail.data)
} 
window.addEventListener('onmessageWS', getDataFunc)

//根據需要，銷燬事件監聽
window.removeEventListener('onmessageWS', getDataFunc)