Получать события Nodejs в React

Question

Я работаю над проектом, который будет использовать React в качестве моего клиента и Nodejs в качестве моего сервера. Мой замысел заключается в том, что сервер Nodejs будет прослушивать некоторые внешние потоки данных, обрабатывать данные, сохранять данные в MongoDB и затем отправлять некоторые события в React. Код на стороне сервера похож на

const EventEmitter = require('events');
const WebSocket = require('ws');
const myEmitter = new EventEmitter();
const ws = new WebSocket('wss://someurl');

ws.on('message', (data) => {

    ........

    /*
        preprocess and do the mongodb stuff
    */

    myEmitter.emit('someevent', data)});
});

Мой вопрос: как я могу прослушать такое событие в моем клиенте React? Если я придерживаюсь этого подхода, нужно ли передавать myEmitter моим компонентам React?

Я новичок в React, поэтому, пожалуйста, дайте мне знать, если есть какой-то лучший способ решить проблему.

Answer 1

мне нужно передать myEmitter моим компонентам React?

нет ... ваш код на стороне клиента и на стороне сервера должен быть разделен. Вы можете использовать клиентское приложение SocketIO, например socket.io.

если вы собираетесь прослушивать кучу разных событий в разных компонентах, рассмотрите возможность использования оболочки enhancer style

function withSocket (event?, onEvent?) { // note: this is TS
  return (Component) => {
    class WithSocketEvent extends Component {
      constructor (props) {
        super(props)

        this.socket = io.connect(SOCKET_ENDPOINT)
      }

      componentDidMount () {
        if (event && onEvent) {
          this.socket.on(event, onEvent)
        }
      }

      componentWillUnmount () {
        this.socket && this.socket.close()
      }

      render () {
        return (
          <Component
            { ...this.props }
            socket={ this.socket }
          />
        )
      }
    }

    return WithSocketEvent
  }
}

// usage

class HasSocketEvent extends Component {
  componentDidMount () {
    // handle the event in the component
    this.props.socket.on("someEvent", this.onSocketEvent)
  }

  onSocketEvent = (event) => {

  }

  render () {

  }
}

// handle the event outside the component
export default withSocket("someEvent", function () {
  // so something
})(HasSocketEvent)
// or
export default withSocket()(HasSocketEvent)