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样式包装器

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)

在React

1 个答案: