Use socket.io in react and node js application

Question

I am using reactjs and nodejs for my application. I am calling the api created in nodejs in my react js component. Let's suppose, I have a component User. And i am calling api in componentWillMount function to get a list of users. So when a new user is added by add user component, The change is not reflecting to list of users. So i need to use socket.io to make application real time, so that my list of users can get something is updated in database and its time to render the component again.

Is there anything regarding above?

You want to addUser and show User RealTime in the same browser? Or like you add user anywhere and you get that user real time? — Supermacy, Dec 25 '18 at 10:12
Not on same browser. Add user anywhere and get user realtime. — , Dec 25 '18 at 10:50
You should try using componentDidMount for on load data and for dynamic update, I don't think it's good unless you are very sure because it uses a lot of bandwidth and would be hard to manage all the clients which are connected to the server. Would be nice if you're looking for a r&d — Leela Venkatesh K, Dec 25 '18 at 16:47

Itai Steinherz · Answer 1 · 2018-12-25T16:43:03.030

1

You could use Socket.io for updating the users list. Another option is to use server-sent events (for more info on the differences between the two, see this answer).

If you choose to use Socket.io, you can emit an event from the client once a new user is added. Once the server receives that event, it broadcasts it to all other connected sockets (using socket.broadcast.emit). The sockets listen to the users-update event (an example for this can be found here), and once they receive it, the client should update the User component and rerender it.

If you choose to use SSE, check out this article.

edited Dec 25 '18 at 16:43

answered Dec 25 '18 at 15:12

Itai Steinherz

777
1
9
19

1

In Server Sent Events there connection is also maintained between server and client. – Supermacy Dec 25 '18 at 15:18
Thanks for the correction. I've revised my comment accordingly. – Itai Steinherz Dec 25 '18 at 16:35

score 0 · Answer 2 · answered Dec 25 '18 at 12:05

0

If you want to apply data from response of api to rendered component, I recommend you will call api on componentDidMount. It is the great way. Of course, you can use socket.io

answered Dec 25 '18 at 12:05

Peng Jin

31
1
4

I am asking, how can i use socket.io with react and nodejs. – Dec 25 '18 at 12:25

Use socket.io in react and node js application

2 Answers2