EventSource:总是收到错误

时间:2018-03-23 10:43:13

标签: javascript php eventsource

要开始使用EventSource API,我写了最具学术性的例子。 问题是,我总是收到错误,但我无法找到有关它的任何有用信息。当我加载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();

1 个答案:

答案 0 :(得分:0)

(TLDR:您没有使用SSE协议 - 请参阅本答复的后半部分。)

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

curl http://127.0.0.1/source.php

(我假设您的html和source.php都在您的本地计算机上,而不是使用https;如果没有,请调整上面。还要调整以添加source.php的路径。)

如果可行,或者您没有可用的卷曲,请查看浏览器中的开发人员工具。看看与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);
    }