Menu
I tried to use the EventSource object with a little example
On the client side, I have this page with the following script :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Welcome!</title>
</head>
<body>
<div id="result"></div>
<script type="text/javascript">
var sse = new EventSource('event-source.php');
sse.onmessage = function(event) {
console.log(event.data);
document.getElementById("result").innerHTML+=event.data + "<br>";
}
sse.onerror = function(event) {
console.log(event);
}
</script>
</body>
</html>
script calls event-source.php on server. Here is event-source.php :
<?php
header('Content-type: text/event-stream');
echo 'data: '.time().PHP_EOL;
When I try this configuration on Firefox, the method "onMessage" is well called, but not with Chrome. When I put the "onError" method, it seems that it is called but I cannot see the error cause.
What should I do?
709
CLIENT
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("/html/demo_sse.php");
source.onopen = function() {
document.getElementById("myH1").innerHTML = "Getting server updates";
};
source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("myDIV").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
SERVER
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
