Loading bar with execution time from server - javascript

In my website, I use a script (on server) with data sent from the webpage. The problem is that the script execution time (+data transit) takes 5 to 30 seconds to execute and waiting can be quite long for the user so I was wondering what is the best way to create a waiting loading bar? Do I have to execute a first function on the server that will calculate the time, and then send it to the client, or do I use repeted AJAX requests with each time, the current status ?
The advantage with the second one is that it's easier to just send the status after each part of the script than to calculate the speed from just the data sent. Moreover it could be more precise, basing itself on the actual connection time... But I think it could use more server ressources. And if I choose that what is the best delay between each requests ?
Thank you for your answers

Related

How to Execute PHP script in 15 seconds?

I'm building App where I have to get confirmation from user in real time so i have to reload data in 15 seconds and cron job don't works in this period of time.
Any solution in PHP or JavaScript or server side ?
There are actually several ways to achieve this. You can do it with WebSocket and push the data to the browser from PHP, or you can do interval polling from the javascript side.
Resources:
Socket.io
JS Polling
Call ajax inside setInterval, To get data from server in every 15 second and update in DOM
setInterval(function(){
alert("Call ajax here to get data from server in every 15 second and update in DOM");
}, 15000);

PHP Return user to script continuously running in background

I currently have a PHP script running in the background executing a PHP script reading a big table. At the same time it is sending the results to an API. This is done with unbuffered query.
On the top of this script, I've put
ignore_user_abort(true);
set_time_limit(0);
To make sure the script runs in the background until it is done. I also have a Javascript that is getting progress report from this script. But, when the page is reloaded, the progress is started again and it will start sending the data again to the API duplicating data.
I was wondering if there is a way to let the user continue on the script. So the script is already running in the background, but is there a way to return the user to the script so it'll be like they never left?
EX:
User starts importing, import is at 200 rows out of 1 million. They refresh the page and the page says 202 rows out of 1 million. 202 mil cause time has past importing more rows while the user has left since script is executing in the background.
Thank you in advanced
You can use websocket to this case. When you will establish new connection to websocket you can store the connection in cookies. Then when you will reload the page you can restablish connection to websocket server. On top of that you need have a websocket server that can read from cookie variables.
Could this be done with using a cookie ?
Each time it runs, update said cookie then if the page is refreshed use the information in the cookie to start where it left off and update the page ?

Wait 5 seconds before download button appear

I know how to do that with javascript but I need a secure way to do it.
Anybody can view page source, get the link and do not wait 5 seconds.
Is there any solution? I'm working with javascript and django.
Thanks!
The only secure way would be to put the logic on the server that checks the time. Make an Ajax call to the server. If the time is under 5 seconds, do not return the HTML, if it is greater than , than return the html to show.
Other option is to have the link point to your server and if the time is less than five seconds it redirects them to a different page. If it is greater than 5, it will redirect them to the correct content.
Either way, it requires you to keep track of session time on the server and remove it from the client.
Use server side timeout.. whenever there is (AJAX) request from client for download link with timestamp, compare the client sent timestamp with currenttime and derive how much time is required to halt the request at server side to make up ~5 seconds. So by comparing timestamp you can almost achieve accuracy of waiting time as the network delays would be taken into account automatically.
You can use ajax, retrieve the button source code from your back end and intert it on your page.
Something like
$.get('url', function(sourceCode) {
$('#midiv').html(sourceCode);
});

Refresh webpage after postback was received

I am using an Image processing API. (Blitline)
By the nature of it, image processing takes a while to complete. Let's say 3 - 6 seconds.
After submitting a job, the API returns immediately the future url of my procesed image, but for 3 - 6 seconds that url will return a 404, since the image has not yet finished proessing.
As soon as the job finishes, the Blitline service sends a Postback to a PHP script on my server, telling me it's done.
At this point, I want to show the processed image to the user.
Is there a technology that will load the image in the user browser at the time the postback comes in?
I know it could be done with Javascript polling. E.g. check every 2 seconds if the postback had come in yet.
But I wonder if there is a more modern way to do this?
Another issue that has to be dealt with is S3 latency. Just because an image is uplaoded to S3 and S3 has responded that it got it, doesn't mean the image will be available publicly immediately. While it is generally available within a few milliseconds, this can extend into seconds sometimes.
Since you have the URL, you can just poll S3 for the image. Here is an example:
https://coderwall.com/p/hy_qjw
This example tries to load a hidden image from S3. If it succeeds, it tries again in a few seconds (you can adjust the setTimeout). This would work wether you are waiting for Blitline to finish, or waiting for S3 to make the image available.

Is it bad idea to make an AJAX post call every 2 secs?

If I make an AJAX $.post call (with jQuery) to a php file for updating a certain parameter/number, does it considered bad practise, dangerous or similar?
$.post(file.php, {var:var}, function(data){
// something
}, json);
It would be a single user on a single page updating a number by clicking on an object. For example if user A is updating a certain number by clicking on an object user B should see this update immediately without reloading the page.
It depends on 3 main factors:
How many users will you have at any given time?
How much data is being sent per request on average?
Given 1 and 2, is your sever set up to handle that kind of action?
I have a webapp that's set up to handle up to 10-20k users simultaneously, makes a request each time the user changes a value on their page (could be more than 1 req per second), and it sends roughly 1000 bytes on each request. I get an average of 10ms response time, however that's with node js. Originally I started the project in PHP but it turned out to be too slow for my needs.
I don't think web-sockets is the right tool for what you're doing, since you don't need the server to send to the client, and a constant connection can be much more expensive than sending a request every few seconds.
Just be sure to do lots of testing and then you can make judgements on whether it'll work out or not for your specific needs.
tl;dr - It's not a good idea if your server can't handle it. Otherwise, there's nothing wrong with it.
Another solution could be, to cache user actions in local storage/variables, and send them all at once every 10-15 seconds or so, then clear the cache, when sending was successful.
In this case you should also validate the data in local storage to prevent tampering.

Categories