I cannot see HTML5 EventSource event with onmessage method in Chrome

By | December 24, 2017
Questions:

I try to use EventSource object with a little example

Client side, I have this page with 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, method “onmessage” is well called, but not with Chrome. When I put “onerror” method, it seems that it is called but I cannot see error cause.

What should I do ?

Answers:

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:

  1. ErrorEvent.message (Read only) Is a DOMString containing a
    human-readable error message describing the problem.
  2. ErrorEvent.filename (Read only) Is a DOMString containing the name
    of the script file in which the error occurred.
  3. ErrorEvent.lineno (Read only) Is an integer containing the line
    number of the script file on which the error occurred.
  4. ErrorEvent.column (Read only) Is an integer containing the column
    number of the script file on which the error occurred.
  5. 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

Questions:
Answers:

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();
    ?>

Leave a Reply

Your email address will not be published. Required fields are marked *