EventSource的响应MIME类型为"text/html"，而不是"text/event-stream"。因此连接被中止。头部应该设置为"text/event-stream"。

Question

你好，我在使用SSE时在控制台中遇到了以下错误：

EventSource的响应MIME类型为"text/html"，而不是"text/event-stream"。因此连接已终止。

JS代码如下：

if (typeof(EventSource) !== "undefined") 
{
    var source = new EventSource("../api/updateWellData.php?uid=<?php echo $node_id ?>");
    source.onmessage = function(event) {
        var response = JSON.parse(event.data);
        document.getElementById("result").innerHTML = response.test;
        // some code like the above line
    };
}  
else 
{
    // refresh the page every 30 secs
} 

PHP代码如下：

header('Cache-Control: no-cache');
header("Access-Control-Allow-Origin: *");
header("Content-Type: text/event-stream");

require_once("../resources/config.php");

if (isset($_GET['uid']))
{
    $uid = $_GET['uid'];
    while (1) 
    {
        $query = Query("SELECT * FROM well_data_last WHERE well_detail_id = $uid");
        $result = fetch_array($query);
        echo json_encode($result);
        ob_end_flush();
        flush();
        sleep(1);
    }
}

这是我第一次使用SSE，我参考了以下文档：mozilla | w3schools

- Arian Sakhaei

---

我在 Laravel 设置中遇到了相同的问题。一些解决方案说要删除 PHP 中的空格。但是这并没有解决我的问题。 - Viral

分享来自Web服务器的完全输出，包括标头和响应正文。 - Evert

Answer 1

当您的PHP代码以错误的格式输出文本时，会出现此错误。

这可能是PHP错误消息（全部以原始HTML形式输出），也可能是页面上的其他文本，不符合 text/event-stream 格式。

如果 PHP 文件的输出与所需的 text/event-stream 格式不匹配，则会回退到使用 text/html。 Javascript 要求事件流使用 text/event-stream 内容类型，因此JS控制台将显示错误，但这只是实际问题的症状 - 要解决该问题，您需要修复PHP。

---

在OP的情况下，问题出在他们的echo语句上。所有输出到流的数据都必须以data:开头，并以换行符\n结尾。流本身必须以另一个换行符结尾，表示没有更多的data:消息跟随。

要解决错误，OP应更改为：

echo json_encode($result);

to

echo "data: " . json_encode($result) . "\n\n";

---

OP 的代码存在另一个问题，在数据库查询中没有防止 SQL 注入的保护措施。虽然这与手头的问题无关，但值得指出的是应该使用预处理语句。

- Toastrackenigma

Answer 2

我曾经遇到过同样的问题，问题出在 PHP 文件中的语法错误，导致了错误信息的显示。

- Mohamed hesham

---

我的 php 没有问题，我遇到了 JavaScript 的问题。 - Arian Sakhaei