像 Redux 一样封装一个 websocket

const WS_URL = 'ws://demo.com/ws'
export class WSConnection {
  constructor(liveId) {
    this.connection = new WebSocket(WS_URL)
    this.connected = false
    this.listeners = []
    this.connection.onopen = () => {
      console.log('[ws] connection established!')
      this.connected = true
      this.connection.send("HEATBEAT")
    }
    this.connection.onmessage = e => {
      // console.log('[ws] receive:', e.data)
      this.listeners.forEach(listener => listener(e))
    }
    this.connection.onerror = e => {
      this.connected = false
      console.log('[ws] error:', e.message)
    }
    this.connection.onclose = e => {
      this.connected = false
      console.log('[ws] close:', e.code, e.reason)
    }
  }
  stop() {
    if (this.connected) {
      this.listeners = []
      this.connection.close()
    }
  }
  send(msg) {
    if (this.connected) {
      this.connection.send(msg)
      console.log('[ws] send message:', msg)
    }
  }
  listen(listener) {
    this.listeners.push(listener)
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener)
    }
  }
}

class extends React.Component {
  connection = new WSConnection('DEMO_ID')
  componentDidMount() {
    this.connection.listen(this.handleMessage)
  }
  componentWillUnmount() {
    this.connection.stop()
  }
  handleMessage = e => {
    // TODO
  }
  handleSendBarrage = message => {
    // construct a string action
    this.connection.send(barrageAction(message))
  }
}

function createStore(reducer) {
  let state = null
  let listeners = []

  const getState = () => state
  const subscribe = listener => {
    listeners.push(listener)
    return () => {
      listeners = listeners.filter(l => l !== listener)
    }
  }
  const dispatch = action => {
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }
  dispatch(null)
  return {
    getState,
    dispatch,
    subscribe
  }
}