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?
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?
Share Improve this question edited Mar 10, 2021 at 6:56 Madison Attobra 315 bronze badges asked Nov 3, 2012 at 12:53 mika34mika34 4014 silver badges4 bronze badges 5 |3 Answers
Reset to default 1CLIENT
<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();
?>
In onmessage you are calling wanted object property, why dont you do the same in onerror?
I think that your onerror should look like this:
sse.onerror = function(event) {
console.log(event.message);
}
Explanation: https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events - this link says "When problems occur (...), an error event is generated. "
So when custom error handling you should learn about the ErrorEvent structure :) It goes like this:
- ErrorEvent.message (Read only) Is a DOMString containing a human-readable error message describing the problem.
- ErrorEvent.filename (Read only) Is a DOMString containing the name of the script file in which the error occurred.
- ErrorEvent.lineno (Read only) Is an integer containing the line number of the script file on which the error occurred.
- ErrorEvent.column (Read only) Is an integer containing the column number of the script file on which the error occurred.
- ErrorEvent.error (Read only) Is a JavaScript Object that is concerned by the event.
More info and source: https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent
This topic is way too old. But even today, I have sometimes seen mixed behaviours when using onmessage with the EventSource.
So far, I have had much success with the following variant
<!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.addEventListener('message', function(event) {
console.log(event.data);
document.getElementById("result").innerHTML+=event.data + "<br>";
});
sse.addEventListener('error', function(event) {
console.log(event);
});
</script>
</body>
</html>
messageenvelope as it were but is not maintaining an open connection - it is re-establishing the connection every seconds – Professor Abronsius Commented Feb 24, 2021 at 9:09