socket.io with apache and angularjs - angularjs

I would be implementing a notification in my web app.
The technologies on which the app is built is Angularjs Apache PHP(For Api).
Our initial approach was to query the database every 10 seconds for any notification.
Is using socket.io beneficial in this scenario.?

It depends on the way you will implement it.
If you got only 1 or less new datasets in 10 seconds you will save capacity by sending a message via socket.io to the client to pull the new data.
If you got more than 1 new dataset in 10 seconds, the "pull every 10 seconds" will be better.
If you dont know how much new datasets will came up, you could the a mixed thing. Send a message to the client (via socket.io) to do the next pull. and then the client will pull timer-elapsion. if not, your timer will not pull the new data and will save network-traffic.

Related

Display realtime data in reactjs

I'm sending data from my backend every 10 seconds and I wanted to display that data in reactjs. I've searched on the net to use socket.io to display real-time data. Is there a better way to use it?
If you're dead set on updating your data every 10 seconds, it would make more sense to make a request from the client to the server, as HTTP requests can only be opened from client to server. By using HTTP requests, you won't need to use socket.io, but socket.io is an easy alternative if you need much faster requests.
Depending on how you are generating the data being sent from your backend, specifically if you are using a database, there is most likely a way to subscribe to changes in the database. This would actually update the data in realtime, without a 10 second delay.
If you want a more detailed answer, you'll have to provide more detail regarding your question: what data are you sending? where is it coming from or how are you generating it?
I'm working on an autodialer feature, in which an agent will get a call when I trigger the button from the frontend (using react js language), and then automatically all the leads in the agent assigned portal will get back-to-back calls from agent number. However, because this process is automatic, the agent won't know who the agent has called, so I want to establish a real-time connection so that I can show a popup on the frontend that contains information about the lead who was called.

How to load huge amount of data from spring boot to reactjs?

I have two applications, spring boot backend and react frontend. I need to load a lot of data (lets say 100 000 objects, each 3 Integer fields), and present it on a leaflet map. However i don't know which protocol should I use. I thought about two approaches:
Do it with REST, 1 000 (or more/less) objects each request, create some progress bar on front end so user does not refresh the page all the time because he thinks something is wrong.
Do it with websocket, so it is faster? Same idea with progress bar, however I am worried that if user starts to refresh the page, backend will stream the data even though connection from frontend is crashed and new one is established, for the new one the process will begin too, and so on.
If it is worth mentioning, I am using spring-boot 2.3.1, together with spring cloud (eureka, spring-cloud-gateway). Websocket i chose is SockJS, data is being streamed by SimpMessagingTemplate from org.springframework.messaging.simp.SimpMessagingTemplate.
If you have that amount of data and alot of read write operations, I would recommend not returning it in either websocket or rest call(reactor or MVC) sending big amount of data over tcp has it issues, what I would recommend is quite simple, save the data to Storage(AWS S3 for example), return the S3 bucket url, and from the client side read the data from the S3 directly,
alternatively you can have a message queue that the client is subscribe on(pub/sub), publish the data in the server side, and subscribe to it on the client side, but this may be an overkill.
If you are set on rest you can use multipart data see the stack overflow question here:
Multipart example

Display a continuous stream of database records on Angular JS

I am building a UI using React JS, and I want to display in realtime a list of records from a Spring Boot application (let's call it the main app), which is connected to a database that receives the health status of around 500 applications that are being monitored. So each record contains the system IP, app name, date and time of the report, etc.
The solution I can think of right now is to poll the main app every 5 seconds and get the latest records.
But I want to avoid the time-gap of 5 seconds, and instead have a real-time data coming on my UI.
I have seen such systems in action, but I am unable to find a solution to this.
Any pointers/advice/hints/suggestions will be highly appreciated.
For real-time applications, classic HTTP request/response paradigm is not the best option. Take a look at WebSocket protocol and some libraries that can may help you: socket.io (Javascript), Ratchet (PHP)

AngularJs/ExpressJs: Best way to manage real time notifications

I'm using AngularJs on frontend and ExpressJs on backend and I would like to know the best way to manage real time notification.
I hesitate between using sockets(socket.io) or querying notifications every 5 seconds
What is the cleanest way to do it ?
This is exactly what socket.io is for.
You don't want to make unnessessary HTTP requests to query a notification endpoint every 5 seconds. Imagine this on a scale of 100 users. What about 1000 users?
socket.io lets you initiate communication on the server side without having to make a request from the client. Notify the client when the client needs to be notified.

Best approach for real time process information / Server + JS Client

I have a C# Web API project on server side and on front-end I have ExtJS 4.2.1 (Javascript framework client).
There is a section in my app where I request to start a long running process (about 5 minutes) and I want to show the user the status of the process being executed.
Basically, the process will run a special calculation for every employee in the database (about 800), so I want to let the user know which Employee is being processed in that moment.
So I was thinking in two ways of doing this, and maybe I don't know if having both is ok.
Use SignalR to show the information of the process in Real Time.
Write to a database table all the process log (every employee that its being processed).
If I use the first approach, if the user close the browser he will loose all the information about the process and if he log into the app again he will only see the actual status.
If I use the second approach, if he log into the app again he could see all the information, and using maybe a timer on client side the data could be refreshed every 5 seconds.
Does anyone have implemented something like this? Any advice is appreciated.
You should use a combination of the two. When you have calculated a employee save the state to the database and publish the change on a service bus.
Let SignalR pick these messages up and forward them to the client. This way the user will see old state when he connects and new state then they arrive with SignalR. I have created a Event aggregator proxy that makes this very easy.
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki
Follow the wiki to set it up, here is a demo project
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
Live demo
http://malmgrens.org/Signalr/

Resources