streaming progress in ajax from php server processing database

Question

I've Looked at ajax progress bar solutions on this site, However i can't find anything to help with the below,

basically,
[browser] ----> makes ajax call to [server running php]

my php code

<?php

 //input and process ajax request

 //[MySQL] processing 5000 rows of a table

 //after 5000/5000 row, end of ajax call

?>

Now, I need to show the user the status of the rows being processed
eg Processing::::::::: 2322/5000. row

The code for processing Mysql looks like this

foreach($result_set as $table_row)
{
   // process each table row
}

How am i going to let the client know of this progress via xmlhttprequest? cannot use JQUERY, only Javascript

Tried implementing the below,

the server continously echos the progress in a loop,

<?php

 //progress

     while($i < $total_progress)
     {
     //php processing

     if(@ob_get_contents()){ ob_end_flush(); flush(); }

     echo $i; // progress
     $i++;


     }
 ?>

The Data (variable $i) is continously being printed and pushed into the response,
Is there a way i can read the printed variable from the server,constantly before the ajax call ends?

I updated my answer to give you an example of something along the lines of what I believe you are looking for. — Crackertastic
– Crackertastic, Commented Mar 27, 2014 at 15:43

Crackertastic · Accepted Answer · 2014-03-27 16:04:57Z

2

This can be done with a combination of AJAX, sessions, and javascript. I've never made any graphical versions of a bar, but I have made text-based ones in the past.

In your client side page, have AJAX make a call to your page that will do the table processing. Have this server side page start a session and create a session variable to track what your progress is at (e.g. $_SESSION['processedRows']). Now inside your processing loop after you processed a row, increase the value of your session var and then make a call to session_write_close(). This will write your session info to disk and then close the session. This is important, as I will explain in a minute. You must also make another call to session_start() again prior to updating your session variable in the next iteration of your foreach loop.

Back on the client side, you will have another AJAX request being sent on an interval (I use setInterval() in javascript for this) which will call up another server side page that will open a session and return the value of $_SESSION['processedRows']. You can take this value and use it update your counter, progress bar, etc. You could return several values as JSON or an HTML snippet, doesn't matter. Just make sure that you have a callback method of some kind in place that will kill the interval that has been setup on the client side. It is important that you call session_write_close() in your long running script. If you do not then your concurrent script to check the progress will not be able to access your session variables and will lag while it waits for the processing script to end. The reason is that the session file has not been released until you call session_write_close().

EDIT:

Here is a very basic, no frills example of what you are looking for. This doesn't have much in regards to error checking, timeouts, etc. But it should illustrate what you want done. No jQuery either, as per you question. For this you will need three files. First you need your long running script, this one basically puts PHP to sleep very briefly 5000 times. It is to illustrate your table operations.

startCounter.php

<?php

//Start a long-running process

$goal = 5000;
session_start();
for($i = 0; $i < $goal; $i++) {
    session_start();  //Reopen session to continue updating the progress
    if(!isset($_SESSION['progress'])) {
        $_SESSION['progress'] = $i;
        $_SESSION['goal'] = $goal;
    }
    //wait a wink
    usleep(rand(500, 2000));
    $_SESSION['progress'] = $i;
    session_write_close();  //Close session to gain access to progress from update script
    header_remove();
}

?>

Next you need an update script, this one is very simple, it will only output a string with the progress update.

updateCounter.php

<?php

//Get the progress

session_start();

print("Processed " . $_SESSION['progress'] . " of " . $_SESSION['goal'] . " rows.");

?>

Next you need your client side ready to go with AJAX. You need to have a way to start the long running script, and then while that request is incomplete, you set and interval to hit the server up for the current progress. Just make sure you kill the interval when operation is done. Here is the test page:

progress.html

<!DOCTYPE html>
<html>
<head>
    <title>Progress Test</title>

    <script language="javascript">

    function go()
    {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "startCounter.php", true);
        interval = window.setInterval( function () {
            update();
        }, 200);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4) {
                window.clearInterval(interval);
                //Extremely likely that the AJAX update function won't make it in time to catch
                //the script at 5000 before it wins.  So let's display a message instead showing
                //that everything is done.
                document.getElementById("updateme").innerHTML = "Operation has completed.";
            }
        }
        xhr.send();
    }

    function update()
    {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("updateme").innerHTML = xhr.responseText;
            }
        }
        xhr.open("GET", "updateCounter.php", true);
        xhr.send();
    }

    </script>

</head>

<body>

    <form>
        <input type="button" onclick="go()" value="Go!" />
    </form>

    <h3>AJAX update test</h3>

    <h4 id="updateme"></h4>

</body>
</html>

Hope that gets you going in the right direction.

edited Mar 27, 2014 at 16:04

answered Mar 27, 2014 at 11:46

Crackertastic

4,9232 gold badges33 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wolfgang Over a year ago

Is this the best way to get the progress bar up?, a new ajax request each time to update the progress multiplied by a large number of users on the site, is simply too many requests.

Crackertastic Over a year ago

Can't say if it is the best. But I think it could apply to application-specific situations. Even at large numbers of users, they are killing the additional AJAX requests as soon as the long-running script is complete. You can also set the interval farther out so not so many requests are made. However, based on your example, exactly how many users on your site need to process 5000 rows? (I'm assuming you are referring to CRUD operation and not SELECT statements.)

wolfgang Over a year ago

is'nt this your first answer?, ajax call every 200 microseconds, and using sessions to update your progress, well anyway, +1 for your time.

Crackertastic Over a year ago

Yes it is (and in this above answer it is about 70-75 calls). It isn't perfect by any means. Out of curiosity though, how many users will be needing to make calls to the system that will perform 5000 record processes? I only ask because I recently had to make a similar function to do database updates done only by admins, but it is very rare when the operation would be needed. So for my particular case the ends justified the means.

Collectives™ on Stack Overflow

streaming progress in ajax from php server processing database

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related