40

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

我应该怎么办？

4

3 回答 3

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();
    ?>
于 2016-01-20T00:12:01.350 回答
-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结构:) 它是这样的：

  1. 错误事件。message（只读）是一个 DOMString ，其中包含描述问题的人类可读错误消息。
  2. 错误事件。filename（只读）是一个 DOMString，其中包含发生错误的脚本文件的名称。
  3. 错误事件。lineno（只读）是一个整数，包含发生错误的脚本文件的行号。
  4. 错误事件。column（只读）是一个整数，包含发生错误的脚本文件的列号。
  5. 错误事件。error（只读）是事件所关注的 JavaScript 对象。

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

于 2014-02-03T11:11:19.290 回答
-1

这个话题太老了。但即使在今天，我有时也会看到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>
于 2020-09-13T20:43:18.013 回答