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

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/

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.

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)

Chat app sending method

I'd like to make a chat app, but I don't know how to send the messages in real time. Should I write them into a database, and retrive them on the other side, or should I use sockets for real time messaging? (I would use a database in both cases for reading old messages)
I would suggest using sockets for real time communication and execute job in background that would store these messages into database. Whenewer the user opens the conversation you can load recent messages from database. Otherwise I think there could be a problem with real time sync with the database. Hope this helps.

How to handle long requests on the frontend?

My application allows a user to enter a URL of an article he/she wishes to analyze. It goes through our API gateway to reach the correct services engaged in this process. The analysis takes between 5 and 30 seconds depending on the article's word count.
For now, my reactjs client sends the request to the API and waits for 5 to 30 seconds to receive the response. Is there a better way to handle this such as enqueuing the job and let the API ping the client (reactjs frontend) once it has been done?
Server-sent Events (SSEs) allow your server to push new information to your browser, and hence look ideal to me for this purpose. They work over HTTP and there is good support for all browsers except for IE.
So the new process could look as follows:
Client send request to server, which initiates the lookup and potentially responds with the topic the browser needs to subscribe to (in case that's unique per lookup)
Server does its thing and sends updates as it processes new content. See how the beauty of this is that you could inform your client about partial updates.
If SSEs is not an option to you, you could leverage good old Websockets for bi-directional communication, but for such a simple endeavor, it might be too much technology to solve the problem.
A third alternative, especially if you are talking amongst services (no web or mobile clients on the other side) is to use web-hooks, so that the interested party would expose and listen on a specific endpoint, that the publisher (the server that does the processing) would write updates to.
Hope this is useful.

How to update backbone model from database

I am creating a webpage to show the listing from my database table,
suppose my database table is updating in every 10 second from my php cron , then i want to sync my backbone model/collection whenever my database table get update from my php cron.
Example:- i have table stock_exchange in which i am storing the stocks rate for various companies, and my cronjob update the stocks rate in every 10 second, To show this on UI i am creating the backbone application but my problem is that whenever my table stock_exchange updated i want to sync my backbone model/collection.
Please help,
Thanks in advance
You can either poll the server by calling stockModel.fetch() every 10 seconds in the browser (via setInterval perhaps), or you can use something like web sockets (via socket.io perhaps) to allow the server to push the latest data to the browser, which you can then do stockModel.set(dataFromServer);. Try something and post some code as stack overflow is intended for specific problems not tutorials.

Resources