Ich war auf der Suche nach einer Möglichkeit, Feedback über den Fortschritt eines lang laufenden Skripts zu erhalten und stieß auf Server gesendet Ereignisse. Ich befolgte die hier angegebenen Richtlinien http://www.htmlgoodies.com/beyond/reference/receive-updates-from-the-server-using-the-eventsource.html, kopierte die angegebenen Beispiele, erstellte ein paar PHP-Dateien und legte sie auf meinem lokalen Host-Server auf meinem Laptop (mit Apache-Webserver).Server gesendet Event Messaging Problem
Sie funktionierte gut, der Server gab eine Nachricht jede Sekunde der Nachrichtenschleife, die ich im Browser erhalten. Ich habe es in Firefox, Chrome und IE getestet und natürlich hat IE die Meldung "not supported" wie erwartet gemeldet.
Bevor ich meine echte Anwendung erstellte, kopierte ich die beiden Dateien auf meinen Produktionsserver (mit IIS) und rief sie vom selben Browser auf meinem Laptop an.
Das Ergebnis war, dass ich alle Nachrichten erhielt, aber erst nachdem die Schleife abgeschlossen war, nicht zu dem Zeitpunkt, zu dem jede Iterationsnachricht gesendet wurde, was natürlich eher das Objekt vereitelt.
Fehle ich etwas - könnte es eine Einstellung auf dem IIS-Server geben, die die Verwendung von sse einschränkt? Wenn ja, was?
Jede Hilfe wird geschätzt.
Hier sind die beiden Dateien (abgesehen von einer Namensänderung genau sie folgen ziemlich die Beispiele auf mehr als eine einführende Webseite zum Thema):
Erste Datei ssetest.php:
<?php
echo "<!DOCTYPE html><html><head><meta charset=\"utf-8\" /></head><body>";
echo "<script language='javascript' type='text/javascript'>
var esSupport = false, es, result;
function init() {
noEsSupport = (window.EventSource === undefined);
if(noEsSupport) addLog('This browser does not support server-sent events.<br>You will not get any progress messages.<br>Try Firefox or Chrome');
}
window.onload = init;
function startTask() {
es = new EventSource('ssetest_task.php');
//a message is received
es.addEventListener('message', function(e) {
var result = JSON.parse(e.data);
addLog(result.message);
if(e.lastEventId == 'CLOSE') {
addLog('Received CLOSE closing');
es.close();
var pBar = document.getElementById('progressor');
pBar.value = pBar.max; //max out the progress bar
}
else {
var pBar = document.getElementById('progressor');
pBar.value = result.progress;
var perc = document.getElementById('percentage');
perc.innerHTML = result.progress + \"%\";
perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
}
});
es.addEventListener('error', function(e){addLog('Error occurred'); es.close();});
}
function stopTask() {
es.close();
addLog('Interrupted');
}
function addLog(message) {
var r = document.getElementById('results');
r.innerHTML += message + '<br>';
r.scrollTop = r.scrollHeight;
}
</script>";
echo "<br />";
echo "<input type=\"button\" onclick=\"startTask();\" value=\"Start Long Task\" />";
echo "<input type=\"button\" onclick=\"stopTask();\" value=\"Stop Task\" />";
echo "<br /><br />";
echo "<p>Results</p>";
echo "<br /><div id=\"results\" style=\"border:1px solid #000; padding:10px; width:300px; height:250px; overflow:auto; background:#eee;\"></div><br />";
echo "<progress id='progressor' value='0' max='100'></progress> ";
echo "<span id=\"percentage\" style=\"text-align:right; display:block; margin-top:5px;\">0</span>";
echo "</body></html>";
?>
und die Aufgabendatei ssetest_task.php:
<?php
header('Content-Type: text/event-stream');
// recommended to prevent caching of event data.
header('Cache-Control: no-cache');
function send_message($id, $message, $progress) {
$d = array('message' => $message , 'progress' => $progress);
echo "id: $id" . PHP_EOL;
echo "data: " . json_encode($d) . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
//LONG RUNNING TASK
for($i = 1; $i <= 10; $i++) {
send_message($i, 'on iteration ' . $i . ' of 10' , $i*10);
sleep(1);
}
send_message('CLOSE', 'Process complete');
?>