Vu项目中WebSocket实现

 webscoket.js文件

var websock = null
let globalCallback = null
let wsBaseUrl = ''

if (window.location.hostname === 'XXX.com') {
  wsBaseUrl = 'wss://XXX.com'
} 

// 初始化weosocket
function initWebSocket(params) {
  // ws地址
  const wsuri = `${wsBaseUrl}/api/ws/pipeline/alarm/${params.userNo}/${params.regionCode ? params.regionCode : null}`

  websock = new WebSocket(wsuri)
  // 订阅服务端消息
  websock.onmessage = function(e) {
    websocketonmessage(e)
  }
  // 关闭 不用时候一定要销毁
  websock.onclose = function(e) {
    websocketclose(e)
  }
  // 打开链接
  websock.onopen = function() {
    websocketOpen()
  }

  // 连接发生错误的回调方法
  websock.onerror = function() {
    // console.log('WebSocket连接发生错误')
  }
}


function sendSock(paramData, callback) {
  globalCallback = callback
  if (websock.readyState === websock.OPEN) {
    // 若是ws开启状态
    // 发送数据一定要是json类型的字符串，否则报错
     websock.send(JSON.stringify(paramData))
  } else if (websock.readyState === websock.CONNECTING) {
    // 若是 正在开启状态，则等待10s后重新调用
    let curTimer = setTimeout(function() {
      sendSock(paramData, callback)
      clearTimeout(curTimer)
      curTimer = null
    }, 10000)
  } else {
    // 若未开启 ，则等待10s后重新调用
    let curTimer = setTimeout(function() {
      sendSock(paramData, callback)
      clearTimeout(curTimer)
      curTimer = null
    }, 10000)
  }
}

// 数据接收
function websocketonmessage(e) {
  globalCallback(JSON.parse(e.data))
}


// 关闭
function websocketclose(e) {
 //console.log('关闭成功')
}

function websocketOpen(e) {
  // console.log('连接成功------e:', e)
}
function closeSock(params) {
  if (websock) {
    websock.close()
  }
}

export {
  initWebSocket,
  sendSock,
  closeSock
}

调用页面

import { initWebSocket, sendSock, closeSock } from '@/utils/webscoket.js'


mounted(){
 initWebSocket({ userNo: this.userNo, regionCode: null })
 sendSock(JSON.stringify(this.searchParams), this.wsAcceptMessage)
}

metheds:{
    wsAcceptMessage(serveMsg) {
        if (serveMsg) {
          this.alarmInfoTable.unshift(serveMsg)
        }
    },
},
destroyed() {
   // 销毁页面关闭socket
   closeSock()
 },