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?
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.
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 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
I am making a webapplication with multiple pages using nodejs, express & socket.io. One of the features is push notifications. This means socket.io should be running on every page. Connecting to socket.io on every page load takes a lot of time, which slows down the app.
Is there a way to keep the connection to the socket open?
One way would be to use ajax to render different pages inside my root page, but I think this will over complicate the app.
Is there a better way to implement this?
Are you sure you're handling the client side the right way ?
If you have a single page application, the browser should almost never reload completely the page. You should be using some client-side framework to handle SPA mechanisms (routing, templating, etc) like angularjs/backbone/ember/etc...
With a well formated SPA you load your app only once and it is kept alive without page reload as long as the browser tab is opened. So you weboscket would be created also only once. You shouldn't have any problem of this kind, your server side code is OK, it's just that you're doing it wrong client-side.
By the way, if you want to do handle only push data, you should take a look at the Server Sent Events, which is simplier/lighter that a full-duplex implementation like socket.io (which is a bit heavy)
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".