5

为了开始使用EventSourceAPI，我编写了最具学术性的示例。问题是我总是出错，我找不到任何有用的信息。当我加载home.html时，JS 脚本在source.onerror; 我将它打印到控制台但分析对象我找不到任何错误类型或消息，所以我不知道它出了什么问题。代码中有错误吗？可能是与服务器有关的错误？

home.html

<body>
  <div id="result"></div>
  <script src="sse.js"></script>
</body>

sse.js

function isSseEnabled() {
    return (typeof EventSource !== "undefined");
}

if (isSseEnabled()) {
    var source = new EventSource('source.php');
    source.onerror = function(e) {
        console.log(e);
        source.close();
    };
    source.onmessage = function (e) {
        console.log(e.data);
        document.getElementById('result').innerHTML += e.data.concat('<br>');
    }
} else {
    throw 'SSE not enabled';
}

source.php

<?php
header('Content-Type: text/event-stream');
header('Cache-control: no-cache');

$time = date('r');
echo "Time: $time";
flush();
4

1 回答 1

0

（TLDR：您没有使用 SSE 协议 - 请参阅此答案的后半部分。）

您需要做的第一件事是获得正确的错误消息，或者至少查看您的脚本正在生成。我建议使用 curl 来测试你的脚本。从命令行：

curl http://127.0.0.1/source.php

（我假设你的 html 和 source.php 都在你的本地机器上，而不是使用 https；如果没有，请调整上面的内容。还要调整以添加 source.php 的路径。）

如果可行，或者您没有可用的 curl，请查看浏览器中的开发人员工具。查看与 source.php 的连接发生了什么，正在发送什么，正在接收什么。

但是，肯定有几种方法可以改进 PHP 脚本。首先在消息前加上“data:”，并在每条消息后添加一对LF；这是 SSE 协议所要求的。

其次，使用其中包含睡眠的无限循环（SSE 脚本永远不会返回一件事并关闭 - 在这种情况下，您不妨只使用 AJAX）。所以它看起来像这样：

<?php
header('Content-Type: text/event-stream');
header('Cache-control: no-cache');

while(true){
    $time = date('r');
    echo "data:Time: $time\n\n";
    @ob_flush();flush();
    sleep(1);
    }
于 2018-03-26T08:16:54.517 回答