我在 Chrome 中看不到带有 onmessage 方法的 HTML5 EventSource 事件答案

【问题标题】：I cannot see HTML5 EventSource event with onmessage method in Chrome我在 Chrome 中看不到带有 onmessage 方法的 HTML5 EventSource 事件
【发布时间】：2012-10-23 22:44:36
【问题描述】：

我尝试通过一个小例子来使用EventSource 对象

在客户端，我的页面包含以下脚本：

<!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>

脚本调用服务器上的 event-source.php。这是 event-source.php ：

<?php
header('Content-type: text/event-stream');
echo 'data: '.time().PHP_EOL;

当我在 Firefox 上尝试此配置时，“onMessage”方法被很好地调用，但在 Chrome 中却没有。当我把“onError”方法，它似乎被调用，但我看不到错误原因。

我该怎么办？

【问题讨论】：

在 chrome 版本 22 中尝试过，它有效。
不在我的系统上，我在 Ubuntu 12.04 上运行，我尝试使用 Ubuntu 12.04、Chromium 20 和 Chrome 22。此外，onmessage 和 onerror 都在 Firefox 上调用，但事件数据正确显示。 ..
在 Chrome 32.0.1700.102 m 上运行良好
您的 PHP 代码发送回没有 message 信封的数据，但没有保持打开的连接 - 它每秒钟重新建立连接
可能不相关，但是当连接通过 HTTP 时，您可以建立的连接数有限制：stackoverflow.com/questions/16852690/… 因此关闭连接是个好主意，例如onbeforeunload 调用 sse.close()

标签： php javascript html

【解决方案1】：

客户

<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>

服务器

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

【讨论】：

【解决方案2】：

在onmessage 中，您正在调用想要的对象属性，为什么不在onerror 中做同样的事情？
我认为你的onerror 应该是这样的：

   sse.onerror = function(event) {
      console.log(event.message);
   }

解释： https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events - 此链接显示“发生问题时 (...)，会生成 错误事件。”

因此，当自定义错误处理时，您应该了解 ErrorEvent 结构:) 它是这样的：

ErrorEvent.message（只读）是一个 DOMString，包含描述问题的可读错误消息。
ErrorEvent.filename（只读）是包含名称的 DOMString 发生错误的脚本文件的名称。
ErrorEvent.lineno（只读）是包含行的整数发生错误的脚本文件的编号。
ErrorEvent.column（只读）是包含列的整数发生错误的脚本文件的编号。
ErrorEvent.error（只读）是一个 JavaScript 对象，它是关注事件。

【讨论】：

【解决方案3】：

这个话题太老了。但即使在今天，我有时也会看到将 onmessage 与 EventSource 一起使用时出现混合行为。

到目前为止，我在以下变体方面取得了很大成功

<!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>

【讨论】：