I am using DRF and AngularJS for my website. I make a simple request like-
$http({
method: "GET",
url: "http://127.0.0.1:8000/api/sendeop",
}).then(function success(response) {
//some processing on the data returned
}, function error(response) {});
Now if data changes in the database, it is not reflected on angularJS as this only makes the request once while it loads. How to watch the api for data change and process it in angularJS?
I'm not quite sure if $watch or $digest solve my problem, but if they do, how do I use them?
From your problem statement I understand the following:
You have a backend DB. The server-side/middleware queries the DB and sends the data to the front-end.
The client/front-end which is using Angular JS is accepting the data from the server side and utilizing it in the screens.
You want to check if the data in the backend DB is changed and if it is changed you want the client to request the data and refresh the screen content.
If the above understanding is correct, then I would suggest the following:
(For capturing changes of data in a single row)
Add a tsChanged(TimeStamp for changed data) column in the table which is storing the data in the DB.
Every Update query will update the tsChanged field of the row.
When the data will be first sent to the client then the tsChanged of the that state is also sent to the client.
Create a service (say updateCheckerService) in the server side that compares the tsChanged values (between the current tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
If the server responds true (means the data is changed), then call the data load service again.
(For capturing the changes of the data in multiple rows)
Add a tsChanged column in the table which is storing the data in the DB.
Every Update query will update the tsChanged field of the row.
When the data will be first sent to the client then the highest value of tsChanged is sent to the client.
Create a service (say updateCheckerService) in the server side that compares the tsChanged values (between the current highest tsChanged in the DB vs the tsChanged that is sent from the client side). A light weight Select query will do.
Using $interval hit the updateCheckerService by passing the tsChanged thats already present in the client side.
If the server responds true (means the data is changed), then call the data load service again.
Advantages:
Since the Client side data loading service is expensive and heavy, its best to call only when you are sure that the data is changed in the DB.
In order to be sure that the data is changed, we are using a light weight service, thus effectively making the process lighter.
Hope it helps!
wel you got it all wrong, angular js is client side scripting language only,
if you want to track the changes in database and want to show updated data.
you will need to take help any of middleware (i.e socket.io) or
you can use webworkers for ajax poling which will make continous http call to your server in every definite interval or
you can use any third party (i.e. firebase or PubNub) library.
You can implement a notification system (see Amazon SQS or SNS), or, as stated by #str, you can implement a real-time call (see ajax long polling, websockets).
Related
I am creating a web app where a user can type in /poll/:id in order to retrieve a poll with the given id from my database. Presumably, in order to do this, my Node JS express server would first need to send over the HTML I want the poll to be displayed on, the JavaScript that handles the frontend and then JSON data representing the poll.
I am running into a roadblock because I have no idea how to handle such a request. As a jumping off point, I tried to make my server simply send over the html page in question upon receiving the request (and hence not using express's static server). The code is as follows:
app.get('/poll/:id', function(req, res, next){
res.sendFile('poll.html');
});
However, the page on the user's end does not handle any of the CSS, hence the page is not styled at all upon being sent to the user, nor is the frontend JS supported. What exactly do I have to do in order to ensure all of that is functional in the frontend? Is there an easier approach to this that I am not realizing?
If you want to generate the HTML on the server-side, use a templating engine, ejs for example. There u would be able to retrieve the data from the database and easily render the page according to that data.
On the other hand, if you want to retrieve the data using javascript then just serve the HTML files statically, and then create another route which would only respond with the JSON object retrieved from the database, (which the frontend would request), and then the frontend-javascript would render the application
I have a web page which allows users to upload and process specific files. After an user uploads some files, after clicking the 'Process' button an ajax call is being sent to a backend service. In the beforeSend function there is an overlay applied to the screen and a spinner is displayed. When the success function is triggered, then the overlay is removed and a toast notification is being shown like 'Files were processed!'
My goal is to somehow show a progress status for each file based on specific checkpoints in the backend service.
Let's say that the backend service when called does following tasks: parse file, map to specific format, send data to database A.... and in the end it sends back http status 200 and a JSON like
{
"status":"Success",
"message": "File X was processed"
}
Now what I want is that instead of just getting an overlay and disabling the whole page until the success event is triggered, to have a progress bar which is updated for each file based on the exact step where the backend has reached.
For instance, for file A, I would like to see below transitions: 5 % Parsing file, 10 % Mapping file...90% sending data to database, 100% processed.
Is this somehow achievable?
There are few points that you need to look into.
Usually in production code, we need to have timeouts. If you are making an ajax call to the backend API, there will be a timeout associated with that api call. Suppose if the timeout is more than 2 mins, then it will send you a 504 Gateway timeout error.
To overcome this and to implement the functionality which you want, you can have any DB(lets consider SQL server). In your SQL server, make a table:
Process_Table
With schema:
Process_id( Will store the process id/name )
Percentage( Will store the percentage )
At_step ( Parsing, Mapping, Sending to DB etc)
Using Javascript(Or any framework of your choice), use setInterval(), to make check_process() api calls. For check_proceess, you can pass in the process_id, and check against the db. For interval, you can set it to 5 seconds. So that every 5 seconds the call is made.
You can read the response of those API calls and do your processing.
An HTTP request consists of a request and a response. There's no direct way to get status updates beyond the onprogress event which would let you see how much data has been transferred. This is useful for determining how much of the data has been sent to the server, but not so much for how far the server has got with working with that data.
You could store progress in a database and poll a webservice to read the most recent status.
You could also have the server push updates to the client using Websockets for bi-directional communication.
A rough outline for such a system might look like:
Open a Websocket
Send files with Ajax
Get server generated ID back in HTTP response
Pay attention to messages coming over the Websocket that mention that ID
You could also look at doing the whole thing over Websockets (i.e. upload the files that way too). A quick Google search turns up this library for uploading files to a Websocket service hosted on Node.js.
So, by learning more about SQL and database. I end up having a question :
When is it better to do send data to the client side and filter from the client than to make a server request to search inside the database ?
We can imagine a shop website where we access a catalogues of products.
We can see all the products and filter them.
By example, I can filter :
Only vegetables
More than 1 kilos
From Venezuela.
But when is it better to send all my product to the client and filter it when needed ? And when Is it better to make a query for each time the user do it ?
I think DB are more optimize to do the job, but there could be some inconvenient like doing a server request each time.
So what are the elements I need to look at to know what is the good/best choice in this kind of situation ?
I have a variable in my JavaScript which contains the id of the clicked row in the master grid. I want to pass it to the groovy service page that handles my child grid so that it can filter the rows based on that id. How do I do that?
The problem is that your javascript-based grid runs on the client, while the page is rendered server-side. Therefore, some communication must take place in order to instruct your application to filter rows based on what the user selects.
Grails uses the MVC architecture, this means that there is a controller that takes care of answering the requests generated from the client. To answer these requests, the Controller can make use of the Views (.gsp files). So when you call to the URL controller/index you may make use of an index.gsp view to render your page.
What you need to do is to make an ajax call to a controller method (e.g. controller/getFilteredRows) that gets as input the selected row (could be its id) and based on some logic fetches all the required information and sends them back to the client encoded for example using JSON.
Now the client knows the rows it has to display, hence you can update your grid.
I'm designing a client-server system, and i need to understand how to check if the client's data is correct when they send operations and requests. In this particular case, i've got a browser and a javascript client that gets data from longpolling and updates a series of objects wich get binded to html elements, pretty much MVVM.
The steps are something like this:
start polling
get full data
convert the json into a javascript object
update every html object tied to the data
The user can fire an event at any time and works with the latest updated local model.
user fires event
event + full data(all objects converted to json) is sent
Problems are: It's very rough and possibly slow, heavy on the client and the server.
My objectives are to reduce the data transfer to a minimum, and avoid client side corruption/attacks.
How should i go about this?
My objectives are to reduce the data transfer to a minimum
Send only the data that's changed, but the highest cost in AJAX is the request, so unless you are sending a lot of data, it may not make any noticeable difference.
and avoid client side corruption/attacks
Impossible. Your code is running in a browser, the user can do whatever they want.
My objectives are to reduce the data transfer to a minimum
Some things to try:
Reduce the number or frequency of client events that send an update
Send only what data has changed
Compress the data you send
bundle several events into a single request
and avoid client side corruption/attacks.
To avoid attacks, you need to validate all input on the server. You should write your validator without knowledge of the client. You can assume nothing about what combination of data you can get--instead you should assume that someone is hand-crafting requests with a text editor and sending them with CURL.
To avoid corruption (really a "lost update"), use conditional PUTs or POSTs with the if-none-match or if-unmodified-since headers.