Javascript 服务器发送的事件在Google Chrome中不起作用
我正在尝试使用服务器发送的事件更新HTML文档中的特定元素。我正在使用已更改的参数以满足我的需要。当这个问题没有开箱即用时,我尝试了问题的解决方案,即在我的内容类型标题中包含Javascript 服务器发送的事件在Google Chrome中不起作用,javascript,php,server-sent-events,Javascript,Php,Server Sent Events,我正在尝试使用服务器发送的事件更新HTML文档中的特定元素。我正在使用已更改的参数以满足我的需要。当这个问题没有开箱即用时,我尝试了问题的解决方案,即在我的内容类型标题中包含charset=utf-8。仍然没有对HTML的更新。然后我意识到我遇到了以下错误: EventSource的响应有一个不是“文本/事件流”的MIME类型(“text/html”)。正在中止连接。 以下是my.js文件中的相关JavaScript: var source = new EventSource("warehous
charset=utf-8
。仍然没有对HTML的更新。然后我意识到我遇到了以下错误:
EventSource的响应有一个不是“文本/事件流”的MIME类型(“text/html”)。正在中止连接。
以下是my.js文件中的相关JavaScript:
var source = new EventSource("warehouse.php");
source.onmessage = function(event) {
document.getElementById("processing").innerHTML += event.data + "<br>";
};
我完全被难住了。我错过了什么?如何修复此错误 尝试将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.");
};
如果服务器端脚本的运行时间超过3s,请在发送的消息中指定更长的重试时间(请参阅PHP端的代码)。否则,浏览器将在3秒钟后重新连接,这可能会从一开始就运行您的脚本,并放弃上一次运行。可能代码或返回的消息中有错误。您得到的完整响应是什么?您在浏览器控制台中看到了哪些错误?将
onerror
处理程序添加到source
中。@SeanBright我得到的唯一错误是我在问题中发布的错误。@networkdrift,即使在添加onerror
处理程序之后?@SeanBright Yes<但是,code>onerror确实会更新浏览器。答案非常详细,但看起来我仍然会收到加载页面时发布的错误。php脚本必须在您的案例中发送html(当您的脚本中出现错误时会发送html)。是否确定“预览”或“响应”选项卡中未显示network developer工具相应请求的任何内容?
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.");
};
es.onmessage = function(event) {
//This handler fires on each message received.
console.log("Incoming message.");
};