websocket接收消息推送+语音提示

这个是同事的代码，我拿来记录一下，希望以后可以看得懂……

utils/websocket.js

const audioUrl = require('@/assets/remind-music/remind.mp3')
export default {
  install: function (Vue){
    let Socket = ''
    let setIntervalWesocketPush = null
    let socketUrl = ''
    let myAudio = ''
    // 控制长连接是否尝试从新请求
    let againSocket = true
    let SocketFocm = Vue.extend({
      beforeCreate() {
        try {
          myAudio = new Audio()
          myAudio.src = audioUrl
          myAudio.preload
        } catch (error) {
          Vue.prototype.$message({message: '您的浏览器不支持语言提醒功能', type: 'error'})
        }
      },
      methods: {
        sokitEvent(){
          let str = [{"bizId":"1111111111","dflag":0,"gmtCreated":"2020-12-24T08:25:28Z","gmtModified":"2020-12-24T08:25:28Z","id":"1UQjqKwpHNm","message":"您有新的订单，请注意查收！","pk":"shop_console","pushScene":0,"sessionId":"1UMFGC473km","status":0,"type":0},{"bizId":"2222222","dflag":0,"gmtCreated":"2020-12-24T08:25:34Z","gmtModified":"2020-12-24T08:25:34Z","id":"1UQjqQwDPed","message":"您有新的订单，请注意查收！","pk":"shop_console","pushScene":0,"sessionId":"1UMFGC473km","status":0,"type":0},{"bizId":"333333333","dflag":0,"gmtCreated":"2020-12-24T08:25:39Z","gmtModified":"2020-12-24T08:25:39Z","id":"1UQjqWHLT3Y","message":"您有新的订单，请注意查收！","pk":"shop_console","pushScene":0,"sessionId":"1UMFGC473km","status":0,"type":0}]
          this.onmessageWS({data: JSON.stringify({result: str, code:200})})
        },
        myAudio(){
          // false true
          // false false
          // true true
          // 经播放完毕 结束
          if(myAudio.paused){
            try {
              myAudio.play()
            } catch (error) {

            }
          }
        },
        createSocket(url = socketUrl){
          Socket && Socket.close()
          if (!Socket) {
            (url)&&(socketUrl = url)
            console.log('建立websocket连接', url)
            Socket = new WebSocket(url)
            Socket.onopen = this.onopenWS
            Socket.onmessage = this.onmessageWS
            Socket.onerror = this.onerrorWS
            Socket.onclose = this.oncloseWS
            // setTimeout(() => {
              // this.sokitEvent()
              // console.log('发消息')
              // this.onmessageWS({data: 121212})
            // })
          } else {
            console.log('websocket已连接')
          }
        },
        /**打开WS之后发送心跳 */
        onopenWS() {
          this.sendPing()
        },
         /**WS数据接收统一处理 */
        /**
         * 
         * {
         *  业务ID
            bizId: "201224145021255003"
            // 消息文本
            message: "您有新的订单，请注意查收！"
            // pk
            pk: "shop_console"
            // 消息类型 0-订单
            pushScene: 0
            // 店铺id
            sessionId: "1UMFGC473km"
            // 消息提醒类型 0-文本 1-语言
            type: 0
          }
        */
        onmessageWS (e) {
          // 收到消息之后，直接播放语音提醒
          let data = JSON.parse(e.data||'{}')
          if(data.code === 200){
            this.myAudio()
            this.$eventBus.$emit('onmessageWS', {data: data.result})
          }
          if(data.code === 401){
            againSocket = false
          }
        },
        /**连接失败重连 */
        onerrorWS () {
          Socket.close()
          clearInterval(setIntervalWesocketPush)
          if(!againSocket){
            console.log('长连接关闭不再尝试重连')
            return false
          }
          console.log('连接失败重连中')
          if (Socket.readyState !== 3) {
            Socket = null
            setTimeout(() => {
              this.createSocket()
            },10000)
          }
        },
        /**断开重连 */
        oncloseWS () {
          clearInterval(setIntervalWesocketPush)
          console.log('websocket已断开....正在尝试重连')
          if(!againSocket){
            console.log('长连接关闭不再尝试重连')
            return false
          }
          if (Socket.readyState !== 2) {
            Socket = null
            setTimeout(() => {
              this.createSocket()
            },10000)
          }
        },
        /**发送心跳
         * @param {number} time 心跳间隔毫秒 默认5000
         * @param {string} ping 心跳名称 默认字符串ping
         */
        sendPing(time = 5000, ping = 'ping') {
          clearInterval(setIntervalWesocketPush)
          Socket.send(ping)
          setIntervalWesocketPush = setInterval(() => {
            Socket.send(ping)
          }, time)
        },
        // 关闭长连接
        closeSocket(){
          console.log('关闭长连接')
          clearInterval(setIntervalWesocketPush)
          againSocket = false
          socketUrl = ''
          Socket.close()
          Socket = null
        }
      }
    })
    const socketFocm = new SocketFocm()

    /**
     * 发送数据但连接未建立时进行处理等待重发
     * @param {any} message 需要发送的数据
     */
    const connecting = message => {
      setTimeout(() => {
        if (Socket.readyState === 0) {
          connecting(message)
        } else {
          Socket.send(JSON.stringify(message))
        }
      }, 10000)
    }
    /**
     * 发送数据
     * @param {any} message 需要发送的数据
     */
    const sendWSPush = message => {
      if (Socket !== null && Socket.readyState === 3) {
        Socket.close()
        createSocket()
      } else if (Socket.readyState === 1) {
        Socket.send(JSON.stringify(message))
      } else if (Socket.readyState === 0) {
        connecting(message)
      }
    }
    Vue.prototype.$Socket = {
      sendWSPush: sendWSPush,
      connecting: connecting,
      closeSocket: socketFocm.closeSocket,
      createSocket: socketFocm.createSocket
    }
  }
}

main.js中加入以下代码

import createSocket from './utils/websocket'
Vue.use(createSocket)

permission.js文件中加入以下代码

vue.$Socket.createSocket(`ws://api.test.zjddwl.net/message/webSocket/shop_console/${getToken()}`)