i’m building in php a reservation website with a schedule. I’m looking to have real time updates for my users in a efficient way. I found Ajax but I dont want the client to ask the server about updates but the server to send to the client the updated schedule when somebody edited the schedule.
I found that maybe the HTML5 Server Sent Events is what I need. So I tried a simple test page that retreive update via SSE.
demo.html
<!DOCTYPE html>
<html>
<body>
<h1>SSE Output</h1>
<div id="result"></div>
<h1>Debug Console</h1>
<div id="status"></div>
<script>
//SSE si compatible
if(typeof(EventSource)!=="undefined")
{
var i = 1;
var source=new EventSource("demo_sse.php?ver=2");
//Lorsque le serveur envoie un message
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + " #" + i + "<br />";
i++;
}
//EventListener
source.addEventListener('message', function(e)
{
console.log(e.data);
//document.getElementById("status").innerHTML+= "Message Recevied<br />";
}, false);
source.addEventListener('open', function(e)
{
// Connection was opened.
document.getElementById("status").innerHTML+= "Connection #" + i + " opened<br />";
}, false);
source.addEventListener('error', function(e)
{
if (e.readyState == EventSource.CLOSED)
{
// Connection was closed.
document.getElementById("status").innerHTML+= "Connection closed<br />";
}
}, false);
//Validation de l'origine du serveur
if (event.origin != 'https://mydomain.com')
{
alert('Looks like the Origin of the EventSource (the schedule\'s live update service) wasn\'t coming from our secure server!');
//return;
}
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
demo_see.php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$ver = 2;
$time = date("H:i:s");
if ($ver != $_GET["ver"])
{
echo "data: Page updated at: {$time}\n\n";
flush();
}
?>
The problem is that each like 3 seconds there’s a connection opened whatever if the version is matching or not so I think it’s the client that ask the server and not the server asking the client. What I would like is to keep a open connection between the client and the server so the server can send changes when there’s any update made on the schedule.
Any tips would be appreciated!
Thanks
The browser is reconnecting every 3 seconds because your server code isn’t keeping the connection open. It sends the time once then ends. Try something more like this: