Check and display a PHP function's progress with AJAX

Question

I want to display the progress of a PHP function in my webbrowser. One solution would be to put the progress in the database and poll for it while the AJAX function waits for a response, but I was wondering if there's a better and cleaner way of doing this.

I've looked into this plugin which adds a progress promise to the AJAX call in jQuery, but it only seems to support uploads and downloads.

To illustrate what I would like to achieve, my AJAX call looks something like this:

$.ajax({
    type: 'POST',
    dataType:'json',
    url: ajaxUrl,
    data: someData
}).progress(function(response) {

    // Do something with progress messages

}).done(function(response) {

    // Process complete
});

Lets say it calls this function in PHP:

public function heavy_lifting() {

    echo json_encode( array( 'progress', 'Starting!') );

    sleep(1);

    echo json_encode( array( 'progress', 'Pfew') );

    sleep(1);

    echo json_encode( array( 'progress', 'Almost done!') );

    sleep(1);

    // Done!
    echo json_encode( array( 'done', 'Process completed!') );
    die();

}

What's the best way to do something like this?

simpler to store progress in session variable and poll it from there — charlietfl
– charlietfl, Commented Jan 31, 2017 at 16:32
My two cents: first 20% is automized using jquery animate 10 seconds. Then add another animation that lasts for x minutes till 80% and then inform the user with a message that it is taking longer than expected and use the actual upload status in php as suggested by powtac. If it finishes on time, use done() to reset the animations and animate the last 20% in 500ms to show completion. — Nitin
– Nitin, Commented Jan 31, 2017 at 19:36

Mohd Asim Suhail · Accepted Answer · 2017-01-31 16:37:13Z

1

A better approach will be to use Websockets (Ratchet WebSockets for PHP)

Create a Websocket server in PHP, then register that Websocket on webpage using javascript

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});

Whenever there is a change in progress then push event from server which will be received by javascript message eventListener and perform your task after that.

Websocket approach is better than polling.

answered Jan 31, 2017 at 16:37

Mohd Asim Suhail

2,3121 gold badge17 silver badges23 bronze badges

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

4 Comments

guest271314 Over a year ago

Is WebSocket necessary where no data is being sent to server? EventSource could be used to receive message from server.

Mohd Asim Suhail Over a year ago

In your case you have to send data from server to client (i.e progress ), Websocket will create a connection with server and wait for message from server instead of hitting ajax request at regular interval. When new data is generated by server it will be pushed to client.

kapoko Over a year ago

I like this suggestion. It might be overkill for my project though. I'll wait a while if other responses come up with alternatives, otherwise I'll accept this answer. Thanks.

Mohd Asim Suhail Over a year ago

Websocket saves a lot of network bandwidth also , as connection is established only once and re-established if connection breaks, so all overheads caused by XHR request is reduced.

powtac · Accepted Answer · 2017-01-31 19:27:27Z

1

PHP has build in Session Upload Progress, have a look at http://php.net/manual/en/session.upload-progress.php

answered Jan 31, 2017 at 19:27

powtac

41.1k28 gold badges120 silver badges173 bronze badges

1 Comment

kapoko Over a year ago

Thanks for the suggestion, but my question is not about upload processes.

Collectives™ on Stack Overflow

Check and display a PHP function's progress with AJAX

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related