VUE WebSocket

新建webSocket.js文件

let webSocket = null

let timer = null

export function warpAndSetWebSocket(ws) {

  const ws = new WebSocket(url)

  console.log('连接成功')

  if (webSocket) {

    try {

      webSocket.close()

    } catch (error) {

      console.log(error)

    }

  }

  ws.onopen = function(e) {

    console.log('open', e)

    // 给后端发心跳 30秒一次

     timer = setInterval(() => {

        sendMessage('heartbeat', null)

      }, 30000)

  }

  ws.onmessage = function(e) {

    console.log('message', e.data)

    const message = JSON.parse(e.data)

    const type = message.type

    if (type === 'heartbeat') {

      // pass 心跳

    } else if (type === 'text') {

      console.log('message.data', message.data)

    }

  }

  ws.onclose = function(e) {

    console.log('close', e)

  }

  ws.onerror = function(e) {

    console.log('错误', e)

  }

  webSocket = ws

}

// 关闭时候调用

export function removeAndCloseWebSocket() {

  console.log('退出登陆')

  // 关闭心跳

  clearInterval(timer)

  if (webSocket) {

    try {

      webSocket.close()

      webSocket = null

    } catch (error) {

      console.log(error)

    }

  }

}

// 给后端发送心跳

export function sendMessage(type, data) {

  let num = ''

  for (var i = 0; i < 32; i++) {

    num += parseInt(Math.random() * 10)

  }

  const timestamp = new Date().getTime()

  webSocket.send(JSON.stringify(

    {

      'id': num,

      'timestamp': timestamp,

      'type': type,

      'data': data

    }

  ))

}

在其他文件里引用

哪里开启哪里引用

console.log('process.env.AUTH_API', process.env.AUTH_API)

// url是后端地址

              this.url = process.env.AUTH_API.replace('http', 'ws') + '/hb-pcc-core/ws/connect?token=' + this.$store.getters.token

// 把url传到方法中

              warpAndSetWebSocket(this.url )

哪里关闭哪里调用连接

removeAndCloseWebSocket()