Receive Nodejs events in React - node.js

Question

I am working on a project that will use React as my client and Nodejs as my server. My design is that the Nodejs server will listen to some external data streams, process the data, save the data in MongoDB and then emit some events to React. The server-side code is like
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)});
});
My question is, how can I listen for such an event in my React client? If I stick with this approach, do I need to pass in myEmitter to my React components?
I am new to React so please let me know if there is any better way to solve the problem.

Answer 1

do I need to pass in myEmitter to my React components?
no... your client side and serverside code should be separate. You can use a client-side SocketIO app like socket.io.
if you're going to be listening for a bunch of different events in different components, consider using an enhancer style wrapper
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)