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之后發(fā)送心跳
export function onopenWS() {
  sendPing() //發(fā)送心跳
}
// 連接失敗重連
export function onerrorWS() {
  clearInterval(setIntervalWesocketPush)
  Socket.close()
  createSocket() //重連
}
// WS數(shù)據(jù)接收統(tǒng)一處理
export function onmessageWS(e) {
  window.dispatchEvent(new CustomEvent('onmessageWS', {
    detail: {
      data: e
    }
  }))
}
/**發(fā)送數(shù)據(jù)
 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)
  }
}
/**關(guān)閉WS */
export function oncloseWS() {
  clearInterval(setIntervalWesocketPush)
  console.log('websocket已斷開')
}
/**發(fā)送心跳 */
export function sendPing() {
  Socket.send('ping')
  setIntervalWesocketPush = setInterval(() => {
    Socket.send('ping')
  }, 5000)
}

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

createSocket() //創(chuàng)建
sendWSPush(11111) //發(fā)送數(shù)據(jù)


// 事件監(jiān)聽  如果websockte有反應(yīng)觸發(fā)"this.getDataFunc"方法
window.addEventListener('onmessageWS', this.getDataFunc)

//根據(jù)需要，銷毀事件監(jiān)聽(不然會創(chuàng)建多個監(jiān)聽事件，發(fā)一次通告提示好幾次)
window.removeEventListener('onmessageWS', this.getDataFunc)

methods: {
	getDataFunc(e) {
		console.log(e)
	}
}

export default {
  state: {
    webst: null,
    WSMessage: null,
    WSStatus: null
  },
  mutations: {
    /**
      * @description 建立websocket連接
      * @param  state vuex state
      * @param  webst webSocket對象
      */
    setConnect (state, webst) {
      state.webst = webst
    },
    /**
      * @description websocket消息
      * @param  state vuex state
      * @param  message webSocket消息
      */
    setMessage (state, message) {
      state.WSMessage = message
    },
    /**
      * @description 設(shè)置websocet的狀態(tài)
      * @param  state vuex state
      * @param  message webSocket消息
      */
    setWSStatus (state, status) {
      state.WSStatus = status
    }
  },
  actions: {
    /**
     *  @description 開啟websocket連接
     */
    connect ({ state, commit, dispatch, rootState }, { token }) {
      return new Promise((resolve, reject) => {
        const wsurl = 'websocket連接地址'
        const webs = new WebSocket(wsurl)
        // 客戶端接收服務(wù)端數(shù)據(jù)時觸發(fā)
        webs.onmessage = (e) => {
          commit('setWSStatus', 'success')
          commit('setMessage', e.data)
          // 進行操作...
        }
        // 建立連接時觸發(fā)
        webs.onopen = (e) => {
          commit('setWSStatus', 'open')
        }
        // 通信發(fā)生錯誤時觸發(fā)
        webs.onerror = (e) => {
          state.webst.close()
          commit('setWSStatus', 'error')
        }
        // 連接關(guān)閉時觸發(fā)
        webs.onclose = (e) => {
          commit('setWSStatus', 'closed')
        }
        resolve(webs)
      })
    },
    /**
     *  @description 關(guān)閉websocket
     */
    close ({ state, commit, dispatch, rootState }) {
      if (state.webst) {
        state.webst.close()
        commit('setWSStatus', 'closed')
        commit('setMessage', null)
        commit('setConnect', null)
      }
    }
  }
}

// 登錄
   dispatch('connect', null, { root: true })

// 退出登錄
  dispatch('close', null, { root: true })