I have a php script that import large data from csv files with validations.
For that I need to show progress to the user. I have used Event Streaming for that.
When I echo something, I want it to be transferred to client one by one instead of server sent whole output in bulk.
I had already played around with ob_start(), ob_implicit_flush() & ob_flush(), but they didn't work.
My script is working perfect on another server. Below server configurations are given:
Server configuration on which the code is not responding as desired, i.e.
OS: Linux PHP Version 5.4.36-0+deb7u3 Server API: CGI/FastCGI Memory_limit: 128M output_buffering: no value
As I have said, the code is working properly on another server which has the almost same configuration, i.e.
OS: Linux PHP Version 5.4.37 Server API: CGI/FastCGI Memory_limit: 256MB output_buffering: no value
Below is my sample code for sending event:
<?php
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Access-Control-Allow-Origin: *");
$lastEventId = floatval(isset($_SERVER["HTTP_LAST_EVENT_ID"]) ? $_SERVER["HTTP_LAST_EVENT_ID"] : 0);
if ($lastEventId == 0) {
$lastEventId = floatval(isset($_GET["lastEventId"]) ? $_GET["lastEventId"] : 0);
}
echo ":" . str_repeat(" ", 2048) . "
"; // 2 kB padding for IE
echo "retry: 2000
";
// event-stream
$i = $lastEventId;
while ($i <= 100) {
if($i==100){
echo "data: stop
";
ob_flush();
flush();
break;
} else {
echo "id: " . $i . "
";
echo "data: " . $i . ";
";
ob_flush();
flush();
sleep(1);
}
$i++;
}
?>
Below is my client page on which I need response:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EventSource example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../jquery/eventsource.js"></script>
<script>
var es = new EventSource("events.php");
var listener = function(event) {
console.log(event.data);
var type = event.type;
if (event.data == 'stop') {
es.close();
} else {
var div = document.createElement("div");
div.appendChild(document.createTextNode(type + ": " + (type === "message" ? event.data : es.url)));
document.body.appendChild(div);
}
};
var errlistener = function(event) {
es.close();
}
es.addEventListener("open", listener);
es.addEventListener("message", listener);
es.addEventListener("error", errlistener);
</script>
</head>
<body>
</body>
</html>
