linux - Run process with realtime output in PHP

I thought this combination I pieced together from various forum postings (other people's) was really a great way to
process a shell script from PHP. It pings 8.8.8.8 four times, has a great background, and A cool little spinny thing. But you get the point, you can put in your own stuff in this very cool little script.  So yes it should report back to you AS it's pinging.

I think the spinner came from here :https://codepen.io/adamCode/pen/WxyxOd
or https://codepen.io/ChasingUX/pen/aOMvya   ...whicheveR one you like. I think the second was the one I used first.

SCRIPT:


<?php
function process_runlocally() {

$args = func_get_args();
$process_type=$args[0];
$process_parameters=$args[1];
$process_target=$args[2];

ob_implicit_flush(true);ob_end_flush();
$cmd = "$process_type $process_parameters $process_target";

$descriptorspec = array(
   0 => array("pipe", "r"),   // stdin is a pipe that the child will read from
   1 => array("pipe", "w"),   // stdout is a pipe that the child will write to
   2 => array("pipe", "w")    // stderr is a pipe that the child will write to
);
flush();
$process = proc_open($cmd, $descriptorspec, $pipes, realpath('./'), array());
   echo "<script> $(\"#spinner_cube\").show();</script>";
echo "<pre>";
if (is_resource($process)) {
    while ($s = fgets($pipes[1])) {
        echo $s;
        flush();

    }
}
 proc_close();

echo "</pre>";
echo "<script> $(\"#spinner_cube\").hide();</script>";
HTML;
}
?>

<!DOCTYPE html>
<html class="full" lang="en">
    <head><title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <link href="../app_data/bootstrap/bootstrap.min.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
                <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
        <link href="../lib/spinner_spinningcircle.css" rel="stylesheet" type="text/css"/>
        <link href="../lib/spinner_cube.css" rel="stylesheet" type="text/css"/>
         <style>
            body,h1 {font-family: 'Open Sans', sans-serif;}
            body, html {height: 100%}
            .bgimg {
                /* setup for 1920x1080 */
                background: url('../images/login_bk.jpg') no-repeat center center fixed;

                -webkit-background-size: cover;
                -moz-background-size: cover;
                background-size: cover;
                -o-background-size: cover;
                min-height: 100%;
                background-position: center;
                background-size: cover;
            }

            .input_text
            {
                font-size:100px;
                width:100%;
                color:black;
                text-align: center;
                -webkit-border-radius:  8px !important;
                -moz-border-radius: 8px !important;
                border-radius: 8px !important;
                -webkit-border-top: 8px !important;
                -moz-border-top: 8px !important;
                border-top: 8px !important;
                -webkit-border-bottom: 8px !important;
                -moz-border-bottom: 8px !important;
                border-bottom: 8px !important;
            }

           /* Says to remove the border of anything using the input_text CLASS because it was adding a little blue border when in focus */
            input.input_text:focus {
                outline-width: 0;
            }

            pre
            {
                background-color:transparent;
                color:white;
                font-size:25px;
                border:0px;
            }

        </style>
    </head>
    <body>

        <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
            <form id="login" method="post">
                <div class="w3-display-middle">
                    <h1 class="w3-jumbo w3-animate-zoom">


                        <div id="spinner_cube" style="display: none;" >
                            <div class='Cube panelLoad'>
                                <div class="cube-face cube-face-front">F</div>
                                <div class="cube-face cube-face-back">u</div>
                                <div class="cube-face cube-face-left">n</div>
                                <div class="cube-face cube-face-right">M</div>
                                <div class="cube-face cube-face-bottom">s</div>
                                <div class="cube-face cube-face-top">g</div>
                            </div>
                        </div>

                        <div id="result_div" >
                            <br><br>
                                    <?php echo process_runlocally("ping", "-c 4","8.8.8.8") ?>

                        </div>
                        <div id="spinner_spinningcircle_div"  style="display: none;" >
                            <div class="showbox">
                                <div class="loader">
                                    <svg class="circular" viewBox="25 25 50 50">
                                    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                            </div>

                        </div>


                    </h1>


                </div>

            </form>
        </div>


    </body>