websocket通信vue vuex 全局封装

websocket通信 vuex 全局封装
最近公司要用weboscket，但是要全局用，因为我们是想把导航上加上小红点，所以相对来讲比较简单，本人属于socket研究阶段

// import Cookies from 'js-cookie'
//后端给的端口号
const wsuri = ‘ws:/xxxxxxxx’
const websocket = {
  state: {
    websock: null,
    websockData: [],
    system: [],
    comment: []

  },
  mutations: {
    STAFF_UPDATEWEBSOCKET(state, websock) {
      state.websock = websock
    },
    STAFF_websocketonmessage(e) { // 数据接收
      const redata = JSON.parse(e.data)
      // console.log('111')
      console.log(redata)
    },
    STAFF_red(e) { // 数据接收
      // const redata = JSON.parse(e.data)
      // console.log('111')
      console.log(e)
      //   alert('55')
    }
    // websocketonmessage
    // STAFF_SEND (state, text) {
    //   state.websock.send(text)
    // }
  },
  actions: {
    STAFF_WEBSOCKET({ commit }) {
      //   alert('55')
      commit('STAFF_UPDATEWEBSOCKET', new WebSocket(wsuri))

      // console.log('453453')
      // const token = encodeURI('Bearer ' + store.state.token)

      // console.log(websocket.state.websock, 'this.state.websock--')

      // 只有定义了onopen方法，才能继续实现接收消息，即在使用的地方调用onmessage方法。
      websocket.state.websock.onopen = function() {
        var data = {}
        data['auth'] = ''
        data['type'] = ''
        // data['uid'] = Cookies.get('uid') - 0
        data['uid'] = 4
        data['project'] = ''
        console.log(JSON.stringify(data), '--------datga')
        // this.websocketsend(JSON.stringify(data))
        websocket.state.websock.send(JSON.stringify(data))
      }

      websocket.state.websock.onmessage = function(e) {
        // alert('444')
        const redata = JSON.parse(e.data)
        websocket.state.websockData.push(redata)
        if (redata.message.type === 'system') {
          websocket.state.system.push(redata._id)
        }
        if (redata.message.type === 'comment') {
          websocket.state.comment.push(redata._id)
        }
      }
      // 心跳包，30s左右无数据浏览器会断开连接Heartbeat
      // setInterval(function() {
      //   websocket.state.websock.send(JSON.stringify({
      //     'heart': true
      //   }))
      // }, 30000)
    },
    FUN_send({ commit }) {
      //   alert('55')
      commit('STAFF_red')

      //   websocket.state.websock.send(JSON.stringify(data))

      setTimeout(function() {
        var data = {}
        data['auth'] = ''
        data['type'] = 'read_message'
        data['project'] = ''
        data['_id'] = websocket.state.comment.join(',') // 测试建议修改服务端传过来的id
        //  console.log(websocket.state.comment.join(','), '-commentcomment----')
        websocket.state.comment = []
        websocket.state.websock.send(JSON.stringify(data))
      }, 100)
    },
    FUN_sendsystem({ commit }) {
      //   alert('666')

      commit('STAFF_red')

      // websocket.state.websock.send(JSON.stringify(data))

      setTimeout(function() {
        var data = {}
        data['auth'] = ''
        data['type'] = 'read_message'
        data['project'] = ''
        data['_id'] = websocket.state.system.join(',') // 测试建议修改服务端传过来的id
        console.log(websocket.state.system.join(','), '-system----')
        websocket.state.system = []
        websocket.state.websock.send(JSON.stringify(data))
      }, 100)
    }
  }
}
// const

// const

// 实现websocket的连接，需要携带参数token
// const

// 该部分为了获取websocket的相关方法。会发现此处跟mutations 里的写法是类似的，但是，想使用return，需要将相关数据写在getters里面。
// const getters = {
//   STAFF_UPDATE(state) {
//     return state.websock
//   }
// }
// export default {
//   state,
//   mutations,
//   actions,
//   getters
// }
export default websocket