socket.js

let Socket = ''
let setIntervalWesocketPush = null
/**
* 定義參數。
* 根據實際情況來定義
*/
let number = ""
let accId = ""
let sourId = ""  
import baseURL from '@/utils/env'   // 這個是自己項目設置的接口地址

/**建立連接 */
export function createSocket(serviceNumber) {
  number = serviceNumber
  const WSS_URL = `${baseURL.websocket}/${number}`  // websocket 連接地址帶參數
  Socket = new WebSocket(WSS_URL)
  Socket.onopen = onopenWS
  Socket.onmessage = onmessageWS
  Socket.onerror = onerrorWS
  Socket.onclose = oncloseWS
}

/**打開WS之后發送心跳 */
export function onopenWS() {
   sendPing() //發送心跳
}
/**連接失敗重連/關閉 */
export function onerrorWS() {
  clearInterval(setIntervalWesocketPush)
  // Socket.close()
  createSocket(number) //重連
}

/**WS數據接收統一處理 */
export function onmessageWS(e) {
  window.dispatchEvent(new CustomEvent('onmessageWS', {
    detail: {
      data: JSON.parse(e.data)
    }
  }))
}

/**發送數據
 * @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)
  Socket.close()
}
/**發送心跳 */
export function sendPing() {
  Socket.send('ping')
  setIntervalWesocketPush = setInterval(() => {
    Socket.send('ping')
  }, 5000)
}

vue中使用

 // 引用socket.js
   import {createSocket,oncloseWS} from './socket'
// 創建鏈接           
 createSocket(this.serviceNumber)
// 監聽消息返回
window.addEventListener('onmessageWS', this.onmessageWS)
//websocket消息處理
onmessageWS(e){
  //流程跑完關閉websocket
  oncloseWS()
}