Why XmlHttpRequest wait until complete PHP response (proc_open) even with flush?

Question

I 'm trying to execute commands (wp cli) with xhr. My problem is when i call my file deploy.php with the javascript. Without JS call the script works, the flush is immediate.

When i call deploy.php in a XmlHttpRequest, the response wait until the end of the php execution.

I try different commands (grep / wp cli / find) but the result is the same.

I work on WSL Debian + Chrome.

// PHP
public function liveExecuteCommand($cmd, $ajax = false)
{
        ob_start();

        $descriptorspec = array(
            0 => array("pipe", "r"),
            1 => array("pipe", "w"),
            2 => array("file", "error-output.txt", "a")
        );

        $output = '';
        $process = proc_open($cmd, $descriptorspec, $pipes);

        if (is_resource($process)) {

            fwrite($pipes[0], '<?php print_r($_ENV); ?>');
            fclose($pipes[0]);

            while ($s = fread($pipes[1], 8192)) {
                $output .= $s;
                print $s;
                $this->doFlush();
            }

            fclose($pipes[1]);
            $return_value = proc_close($process);

            //echo "La commande a retourné $return_value\n";
        }
        if ($ajax == false) {
            return $output;
        }
}


$obj->liveExecuteCommand($cmd, true);
die();

// JS
function getLiveStream() {
            var ajax = new XMLHttpRequest();
            var url = 'https://www.monsite.local/deploy.php';
            ajax.open('GET', url, true);

            ajax.onprogress = function() {
                document.getElementById("xhr_cmd_result").innerHTML = ajax.responseText;
                console.log('onprogress');
            }
            ajax.onload = function() {
                console.log('onload');
            }
            ajax.onreadystatechange = function() {
                document.getElementById("xhr_cmd_result").innerHTML = ajax.responseText;
                console.log('statechange');
            }
            ajax.send();
}

window.addEventListener('DOMContentLoaded', (event_loaded) => {
            document.getElementById("xhr_cmd").onclick = getLiveStream;
});

In the Google chrome console, the result display all status directly (after 1 min), like the php result.

statechange
onprogress
statechange
onprogress
statechange
onprogress
statechange
onload

I would like have a console.log every time that the flush is called. No problem when i execute the php file in the browser, the problem is certainly in the javascript.

How do I solve the problem?

Answer 1

Let me explain you in simple words.

Javascript's XMLHttpRequest(AJAX) call will request to server. It will only waits for response from server(final output from your php page), irrespective to internal process of server.