javascript - 服务器发送的事件在 Google Chrome 中不起作用

Question

我正在尝试使用服务器发送的事件更新我的 HTML 文档中的特定元素。我正在使用 W3Schools example更改参数以满足我的需要。当这不能开箱即用时，我尝试了 this问题的解决方案，即在我的 Content-Type header 中包含 charset=utf-8 。仍然没有更新 HTML。然后我意识到我遇到了以下错误:

EventSource 的响应具有不是“text/event-stream”的 MIME 类型(“text/html”)。中止连接。

这是我的 .js 文件中的相关 JavaScript:

var source = new EventSource("warehouse.php");
source.onmessage = function(event) {
    document.getElementById("processing").innerHTML += event.data + "<br>";
};

在我的 PHP 文件中，我有以下内容:

if (isset($args->products)) {
    orderProducts($args->products);
}

function orderProducts($products) {
    $bigResponse = outgoingData(constant('bigURL'), $products[0]);
    $littleResponse = outgoingData(constant('lilURL'), $products[3]);

    header('Content-Type: text/event-stream; charset=utf-8');
    header('Cache-Control: no-cache');
    echo "data: Order has been placed.";
    flush();        
}

我完全被难住了。我错过了什么？我该如何解决这个错误？

Answer 1

尝试将 json 编码的数据部分/元素发送回浏览器。

让我看看我能不能记对...这是我的想法，所以它没有被测试!

PHP 端:

// Set SSE headers which are send along first output.
header('Content-Type: text/event-stream; charset=UTF-8');
header('Cache-Control: no-cache');

$sseId = 0;           //Increment this value on each next message
$event = 'eventName'; //Name of the event which triggers same named event-handler in js.
//$data needs to be json encoded. It can be a value of any type.
$data = array ('status' => 'Progress', 'message' => 'My message or html');

//Send SSE Message to browser
echo 'id: ' . $sseId++ . PHP_EOL;             //Id of message
if (!is_null($event)) {
    echo 'event: ' . $event . PHP_EOL;        //Event Name to trigger eventhandler
}
retry: 10000 . PHP_EOL;                       //Define custom reconnection time. (Default to 3s when not specified)
echo 'data: ' . json_encode($data) . PHP_EOL; //Data to send to eventhandler
//Note: When sending html, you might need to encode with flags: JSON_HEX_QUOT | JSON_HEX_TAG

echo PHP_EOL;
ob_flush();
flush();

JavaScript 方面:

var es = new EventSource('sse.php');
es.addEventListener('eventName', function(event) {
    var returnData = JSON.parse(event.data);
    var myElement = document.getElementById("processing");
    switch (returnData.status) {
        case 'Error':
            es.close();
            myElement.innerHTML = 'An error occured!';
            break;
        case 'Done':
            es.close();
            myElement.innerHTML = 'Finished!';
            break;
        case 'Progress':
            myElement.innerHTML += returnData.message  + "<br>";
            break;
    }
});

es.onerror = function() {
    console.log("EventSource failed.");
};

在这种情况下，我仅在数据元素包含 js react 的状态时才使用 1(命名)事件。

您还可以定义多个事件名称以用作状态并定义相应的事件处理程序或定义一个在收到的每条消息上触发的处理程序。

es.onmessage = function(event) {
    //This handler fires on each message received.
    console.log("Incoming message.");
};

如果您的服务器端脚本运行时间超过 3 秒，请在发送的消息中指定更长的重试时间(请参阅 PHP 端的代码)。否则浏览器将在 3 秒后重新连接，这可能会从头开始运行您的脚本并放弃之前的运行。