how to achive a working solution for Server Sent Event and bash script-CodePudding

I would like to implement a web page that show in real time the output of a bash script.

I tried this simple example:

html page:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
</head>
<body>
     <div id="result">put data out here</div>
     <script type="text/javascript">
        function eventsourcetest(){
           var source = new EventSource("http://localhost/prova_ping.php");
           source.addEventListener("message", function(e) {
           if (e.data !== "") {
              data=JSON.parse(e.data);                 
              document.getElementById("result").innerHTML  =  e.data  "<br>";
           }
           }, false);
           source.addEventListener("error", function(e) {
              alert("errore!");
              source.close();
           }, false);
        }    
     </script>
<p><button type="button" onclick="eventsourcetest();">ping google.com</button>
</body>
</html>

prova_ping.php:

<?php

  header('Content-Type: text/event-stream');
  header('Cache-Control: no-cache');

  $proc = popen("ping -c4 www.google.com", 'r');
  while (!feof($proc))
  {
     echo "risultato: " . fread($proc, 4096) . "\n\n";flush();ob_flush();
  }

?>

checking the php page with the command:

wget -O - -q "http://localhost/prova_ping.php"

I get the output in real time, but when I load the html page in firefox and push the button, nothing is happening and I don't get any error from browser on from apache looking into the error.log.

Googling I have found many similar example, usualy on internal php command as time and all working fine but nothing about bash script exept this about ping that for me is not working!

If there are some one that can help me, any suggestions are appreciated.

Thank in advance,

Emilio

CodePudding user response：

You can modify your HTML page like so:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
</head>
<body>
    <div id="result">put data out here</div>

    <button onclick="window.location.href='http://localhost/prova_ping.php';">Ping Google.com</button>
</body>
</html>

CodePudding user response：

First change this line:

  echo "risultato: " . fread($proc, 4096) . "\n\n";flush();ob_flush();

into:

  echo "data " . fread($proc, 4096) . "\n\n";@ob_flush();@flush();

The key thing is the message has to be 'data'. (The standard does allow other messages, but is a feature that is never of practical use.)

I've put ob_flush() before flush(). (ob_flush is for the PHP buffers, so you need to flush them, before flush() which flushes the apache buffers.) The @ just suppresses error messages - if you had the PHP buffers switched off, it would fill your output with noise.

The other fix you need to do is that you are not sending JSON data, so JSON.parse() causes an error. I just changed data=JSON.parse(e.data); to data=e.data;