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 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.
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
Related
I want to update the HTML/pug page of multiple users when particular data changes in my MongoDB database. A user(A) follows another user(B) (whose data is stored in a different collection). When user(B) updates something, user(A) should see the change. There can be multiple people following the same user, and all the people following the user should see live updates.
I tried looking into socket.io but it doesn't look like it is the right thing for my purpose.
Your main options are either websockets (socket.io), server side push notifications with http2, or polling with http.
If socket.io seems overkill, server push notifications probably will too.
You can poll instead. Ie, send an http request from the client at regular intervals, like every 10 (or whatever seems suitable) seconds and update the page based on the response data
You’ll need to use JavaScript on the client for this. Pug templates render just once on page load. If you want dynamic updates after the initial render, you need client side JavaScript in all cases.
I'm designing a real-estate website and I was wondering can I link my front-end webpage that shows the available properties for sale that a new property icon is added when I add to my MongoDB ? to elaborate more, I have a template for each single property which includes picture and some other info about the property, what i want to do is when i add a new collection to my database to appear on my webpage with this template. Thanks in advance
MongoDB can be watched, since your question has 'node.js' tag so assume you use node.js in the server side, I check the doc and there's a watch API returning a ChangeStream object which you may use, just for your reference
If you want to use angular for retrieving and showing data.
You can refer to these sites :
This one tells how to populate data in angular.
&
To get a crisp of doing it with mongo db
What you actually need is server side event system updating your frontend, Changestream that #user1108069 mentioned can be useful in detecting new changes or you can literally identify that when a request is being made to add a new property.
The task here is to update the frontend's current connections to update their view to get the new (load) changes, you can do this in multiple ways.
Use something like firebase realtime DB on the side Firebase Realtime DB
Use any other server side events broker for you This should work too
You can create your own full duplex system, using something like socket.io but do remember that concurrent connections needs to be handled properly. You cannot keep them connected to your server all the time.
Cheers!
Currently, I have figured out how to make API calls to YouTube Data Api and getting the number of likes of any video. And I'm making the call every minute. I do not know, however, how to update the corresponding element in html with the updated value.
Previously, I had made API calls in app.get and then updated using response.send() but that meant that my number would only update everytime I reload the page. Then I took the code block out of app.get but realised I had no way of update the UI with updated numbers from the API call.
I would like to ask how I can go about doing this. Thank you.
for that, you can use WebSocket module
Websocket is just a protocol like HTTP and it provides a persistent connection between a client and server that both parties can use to start sending data at any time.
Websocket is also provided by many front-end frameworks such as flutter, native android, react native etc.
I really liked the way rxjs observables work. I have a application built in express.js and Angular 7.
Now, I want to implement a live update page in it, when user in on that page, he/she will get live updates from server without sending continuous requests from client side. I know this can be done using socket.io but I want to implement it using rxjs observable. When user will open page, it subscribe to a observable and display latest update.
My Query:
I know how it works on client side (angular). But, how I should implement it in expressjs?
Normally, when there is a request from client side, expressjs returns the response and close the request. How to keep connection open and push changes from server (to all users who are on live updates page)?
Also, please let me know, how it will effect server performance? Or is there any better way to do this?
I'm quite new to node.js, so my apologies if this is a potentially stupid question. I'm aware that when a new page is requested, it triggers a data event, which node can then handle accordingly; on my current project though, I have an html button that triggers a few events, but does not redirect the page. Because of this, node isn't recognizing that this is occurring. Is there any way for me to detect this? Or even, as a workaround, is there any way to call one of my node functions from the javascript embedded in the web page?
Thanks~
you are mixing up two different things, the data event in node which you are talking of is triggered because a network connection is established when you point the browser to your website, data is received and sent from the client to the server and back.
this has nothing to do with clientside ui events, for example a click event on a button.
if you want node to recognize a click on your button you have to send something to the server, you can either use a form, issue an ajax request or use websockets.
for ajax requests with jquery : jquery $.ajax documentation
a popular websockets implementation for node.js is socket.io
If you want to call something in Node from the client side, you can use socket.io to transfer events to Node. Then catch those events, and return the correct data back to the client. Refer to the socket.io "How to Use".