Question

我尝试使用一个小例子

来使用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”方法时，它似乎被调用但我看不到错误原因。

我该怎么办？

Answer 1

在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。消息 （只读）是一个包含描述问题的人类可读错误消息。
ErrorEvent。 filename （只读）是包含名称的DOMString 发生错误的脚本文件。
ErrorEvent。 lineno （只读）是一个包含该行的整数发生错误的脚本文件的编号。
ErrorEvent。列 （只读）是包含列的整数发生错误的脚本文件的编号。
ErrorEvent。错误 （只读）是一个JavaScript对象关注事件。

更多信息和来源：https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent

Answer 2

客户端

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

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

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

3 个答案: