How to render the list information obtained by vuex project websocket?

vue projects need to display a lot of information on a single page, and there are several lists of real-time data.
dismantle the module because the page is complex.
but the websocket is maintained separately, and I don"t know how to pass it to the split component after getting the data.
the current practice is to use store to store the list, and websocket gets the data to update the store, list to directly render the data of store.
but the resulting data needs to be processed by Filter, and can only be sorted out in the onmessage of websocket before it is stored in store, because I can"t listen for updates to the internal data of store in the component where the list belongs.
the result is that onmessage has become more and more bloated, which is not conducive to extended maintenance.
is there any way to solve this problem?

Vue.js
Dec.20,2021

A solution has been found.
socket adds another layer of encapsulation, multiple listeners, and a separate update processor listens to onmessage. 

class socket {
  constructor(url, options) {
    this.heartBeatTimer = null
    this.options = options
    this.messageMap = {}
    this.connState = 0
    this.socket = null
    this.url = url
  }
  doOpen() {
    if (this.connState) return
    this.connState = 1
    this.afterOpenEmit = []
    const BrowserWebSocket = window.WebSocket || window.MozWebSocket
    const socket = new BrowserWebSocket(this.url)
    socket.binaryType = 'arraybuffer'
    socket.onopen = evt => this.onOpen(evt)
    socket.onclose = evt => this.onClose(evt)
    socket.onmessage = evt => this.onMessage(evt.data)
    socket.onerror = err => this.onError(err)
    this.socket = socket
  }
  onOpen(evt) {
    this.connState = 2
    //this.heartBeatTimer = setInterval(this.checkHeartbeat.bind(this), 20000)
    this.onReceiver({ Event: 'open' })
  }
  checkOpen() {
    return this.connState === 2
  }
  onClose() {
    if (this.connState) {
      this.connState = 0
      this.onReceiver({ Event: 'close' })
    }
  }
  send(data) {
    //console.log(":"+JSON.stringify(data) )
    if(this.socket.readyState != 1){
      //console.log('readyState',this.socket.readyState)
      setTimeout(() => {
        this.send(data);
      },100);
    }else{
      this.socket.send(JSON.stringify(data));
    }
    //this.socket.send(JSON.stringify(data))
  }
  emit(data) {
    return new Promise(resolve => {
      this.socket.send(JSON.stringify(data))
      this.on('message', data => {
        resolve(data)
      })
    })
  }
  onMessage(message) {
    try {
      const data = JSON.parse(message)
      this.onReceiver({ Event: 'message', Data: data })
    } catch (err) {
      console.error(' >> Data parsing error:', err)
    }
  }
  checkHeartbeat() {
    const data = {
      'type': 'ping',
      'args': [Date.parse(new Date())]
    }
    this.send(data)
  }
  onError(err) {

  }
  onReceiver(data) {
    const callback = this.messageMap[data.Event]
    if (callback) callback(data.Data)
  }
  on(name, handler) {
    this.messageMap[name] = handler
  }
  doClose() {
    this.socket.close()
  }
  destroy() {
    if (this.heartBeatTimer) {
      clearInterval(this.heartBeatTimer)
      this.heartBeatTimer = null
    }
    this.doClose()
    this.messageMap = {}
    this.connState = 0
    this.socket = null
  }
}

export default socket

websocket refreshes the rendering list loop in 1 second. Do you want to clear the list and wait for rendering again?

Previous: The execution of WeChat Mini Programs's Life cycle

Next: Amfe-flexible does not automatically add data-dpr?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu