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

php javascript html

2022-08-30 12:17:53

我试图通过一个小例子来使用这个对象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>

脚本调用服务器上的事件源.php。以下是事件源.php：

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

当我在Firefox上尝试这种配置时，“onMessage”方法被很好地调用，但Chrome则不然。当我把“onError”方法时，它似乎被调用了，但我看不到错误原因。

我该怎么办？

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

在调用通缉对象属性时，为什么不在？
我认为你应该看起来像这样：onmessageonerroronerror

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

说明： https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events - 此链接显示“当出现问题（...）时，将生成错误事件。

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

错误事件。消息（只读）是一个 DOMString，其中包含描述问题的人类可读错误消息。
错误事件。文件名（只读）包含发生错误的脚本文件的名称的 DOMString。
错误事件。线路编号（只读）一个整数，包含发生错误的脚本文件的行号。
错误事件。列（只读）一个整数，包含发生错误的脚本文件的列号。
错误事件。错误（只读）与事件相关的 JavaScript 对象。