connect-ws-match.js

/* eslint-disable func-names, no-underscore-dangle */
import EventBus from 'vertx3-eventbus-client'


const delayObserver = (timeCount) => {
  const state = []
  let stop = false
  return ({
    emmit: () => {
      if (stop) return false
      stop = true

      setTimeout(() => {
        state.forEach((fn) => {
          fn()
        })
        stop = false
      }, timeCount)
    },
    subscribe: (fn) => {
      state.push(fn)
      return () => {
        state.splice(state.indexOf(fn))
      }
    },
  })
}

const delay = delayObserver(800)


class ConnectWs {
  constructor() {
    this.ws = null
    this.state = {}
    this.socketListeners = {}
    this.channelSubscribers = {}
  }

  subscribeChannel(chanel, cb, handlerResponse) {
    if (!this.ws) {
      this.ws = new EventBus('http://217.28.218.188:8889/eventbus')
      return new Promise((resolve) => {
        this.ws.onopen = () => {
          resolve(this._controllerChannel(chanel, cb, handlerResponse))
        }
      })
    }
    return Promise.resolve(this._controllerChannel(chanel, cb, handlerResponse))
  }

  _controllerChannel(chanel, cb, handlerResponse) {
    if (!this.channelSubscribers[chanel]) {
      this.channelSubscribers[chanel] = []
    }

    this.channelSubscribers[chanel].push(cb)

    if (this.socketListeners[chanel]) {
      return () => {
        this._unsubscribeChannel(chanel, cb)
      }
    }

    this.state[chanel] = {}

    this.socketListeners[chanel] = (error, message) => {
      this.state[chanel] = handlerResponse(this.state[chanel], message.body)
      delay.emmit()
    }

    delay.subscribe(() => {
      this.channelSubscribers[chanel].forEach((fn) => {
        fn(this.state[chanel])
      })
    }, chanel)

    this.ws.registerHandler(chanel, this.socketListeners[chanel])

    return () => {
      this._unsubscribeChannel(chanel, cb)
    }
  }

  _unsubscribeChannel(chanel, cb) {
    const index = this.channelSubscribers[chanel].indexOf(cb)

    if (index !== -1) {
      this.channelSubscribers[chanel].splice(index)
    }

    if (!this.channelSubscribers[chanel].length) {
      this.ws.unregisterHandler(chanel, this.socketListeners[chanel])
      this.socketListeners[chanel] = null
      this.state[chanel] = null
    }
  }
}

export default ConnectWs

example-hoc-react.js

/* eslint-disable func-names */
import React, { PureComponent } from 'react'
import ConnectWs from '../../lib/connect-ws-match'
import { updateMatch } from '../../lib/ws-handler'


const ws = new ConnectWs()

const matchWs = WrappedComponent => class extends PureComponent {
  state = {
    match: null,
  }

  componentDidMount() {
    this.chanelController()
  }

  componentDidUpdate(prevProps) {
    const oldMatchId = prevProps.matchId
    const newMatchId = this.props.matchId
    if (oldMatchId !== newMatchId) {
      this.chanelController()
    }
  }

  componentWillUnmount() {
    this.unsubscribeWs()
  }

  chanelController = () => {
    if (this.chanel) {
      this.unsubscribeWs()
    }
    const { matchId } = this.props
    this.chanel = `${matchId}/0`
    ws.subscribeChannel(this.chanel, this.listen, updateMatch)
      .then((unsubscribeWs) => {
        this.unsubscribeWs = unsubscribeWs
      })
  }

  listen = (match) => {
    this.setState({ match })
  }


  render() {
    if (!this.state.match) {
      return null
    }
    return (
      <WrappedComponent
        match={this.state.match}
        {...this.props}
      />
    )
  }
}

export default matchWs