EventSource 流式加载
2024-03-28 15:44:23 / 7
javascript
js
jquery
事件源（Event sources），产生事件的组件或对象称为事件源。事件源产生事件并把它传递给事件监听器（event listeners）。
直接上代码
前端代码：index.html
<!DOCTYPE html>
<html>
<head>
<title>EventSource Demo</title>
</head>
<script src="../jquery/jquery.min.js?v=3.6.4"></script>
<body>
<h1>EventSource Demo</h1>
<div id="content"></div>
<script>
var source = new EventSource("stream.php");
source.onmessage = function(event) {
console.log(event);
document.getElementById("content").innerHTML += event.data + "<br>";
var count = parseInt(event.data);
if (count === 10) {
source.close(); // Stop the EventSource when count reaches 10
}
};
</script>
</body>
</html>后端php代码：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$count = 0;
while (true) {
$count++;
echo "data: $count\n\n";
ob_flush();
flush();
sleep(3);
}
?>效果：但加载到 数字 10 停止，应用场景 websocket，聊天，等持续输出的功能
