I cannot see HTML5 EventSource event with onmessage method in Chrome

Question

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?

Not on my system, I run on Ubuntu 12.04, I tried with Ubuntu 12.04, Chromium 20 and Chrome 22. In addition, onmessage et onerror are called both on Firefox , but Event data are correctly displayed... — mika34, Nov 03 '12 at 14:16
Your PHP code is sending back data without the `message ` envelope as it were but is not maintaining an open connection - it is re-establishing the connection every seconds — Professor Abronsius, Feb 24 '21 at 09:09
Maybe not related, but when the connection is over HTTP there is a limit to the number of connections you can make: https://stackoverflow.com/questions/16852690/sseeventsource-why-no-more-than-6-connections Therefore it is a good idea to close the connection, e.g. onbeforeunload call sse.close() — chrwahl, Apr 22 '21 at 16:10

Vitalicus · Answer 1 · 2016-01-20T00:18:16.197

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

score -1 · Answer 2 · answered Feb 03 '14 at 11:11

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

score -1 · Answer 3 · answered Sep 13 '20 at 20:43

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>

I cannot see HTML5 EventSource event with onmessage method in Chrome

3 Answers3