内容目录
HTML5 引入了服务器发送事件（Server-Sent Events, SSE），这是一种让服务器向浏览器实时推送数据的技术。SSE 简化了实现实时数据推送的过程，特别适合用于股票价格更新、新闻推送等场景。本文将详细介绍如何使用 SSE，并解决常见的问题，帮助您更好地利用这一技术。
📝 什么是 HTML5 服务器发送事件 (SSE)？📝
服务器发送事件（SSE）是一种让服务器向浏览器实时推送数据的技术。与 WebSocket 不同，SSE 只支持单向通信（从服务器到客户端），并且实现起来相对简单。SSE 使用 HTTP 协议，通过 EventSource 对象在客户端接收服务器发送的数据。
基本结构
要使用 SSE，需要在服务器端创建一个事件流（event stream），并在客户端使用 EventSource 对象接收数据。
- 创建服务器端事件流（
server.php或server.py）
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>- 在客户端使用
EventSource对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 服务器发送事件示例</title>
</head>
<body>
<h1>HTML5 服务器发送事件示例</h1>
<div id="output"></div>
<script>
if (!!window.EventSource) {
const source = new EventSource('server.php');
source.onmessage = function(event) {
const data = event.data;
document.getElementById('output').innerText += data + '\n';
};
source.onerror = function(event) {
console.error('EventSource 错误:', event);
};
source.onopen = function(event) {
console.log('连接已建立');
};
} else {
alert('您的浏览器不支持 Server-Sent Events');
}
</script>
</body>
</html>📝 使用服务器发送事件 (SSE) 的基本步骤 📝
1. 创建服务器端事件流
服务器端事件流是一个返回特定格式数据的 HTTP 响应。数据格式如下：
data: 这是第一条消息\n\n
data: 这是第二条消息\n\n每条消息以 data: 开头，以两个换行符 \n\n 结束。
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>2. 在客户端使用 EventSource 对象
在客户端使用 EventSource 对象连接到服务器端的事件流，并处理接收到的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 服务器发送事件示例</title>
</head>
<body>
<h1>HTML5 服务器发送事件示例</h1>
<div id="output"></div>
<script>
if (!!window.EventSource) {
const source = new EventSource('server.php');
source.onmessage = function(event) {
const data = event.data;
document.getElementById('output').innerText += data + '\n';
};
source.onerror = function(event) {
console.error('EventSource 错误:', event);
};
source.onopen = function(event) {
console.log('连接已建立');
};
} else {
alert('您的浏览器不支持 Server-Sent Events');
}
</script>
</body>
</html>📝 实例：使用 SSE 实现实时股票价格更新 📝
下面是一个完整的示例，展示如何使用 SSE 实现实时股票价格更新。
- 创建服务器端事件流（
stock.php）
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while (true) {
$price = rand(100, 200);
echo "data: 股票价格: {$price}\n\n";
flush();
sleep(1); // 每秒发送一次数据
}
?>- 创建 HTML 文件（
index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时股票价格更新示例</title>
</head>
<body>
<h1>实时股票价格更新示例</h1>
<div id="output"></div>
<script>
if (!!window.EventSource) {
const source = new EventSource('stock.php');
source.onmessage = function(event) {
const data = event.data;
document.getElementById('output').innerText += data + '\n';
};
source.onerror = function(event) {
console.error('EventSource 错误:', event);
};
source.onopen = function(event) {
console.log('连接已建立');
};
} else {
alert('您的浏览器不支持 Server-Sent Events');
}
</script>
</body>
</html>🛑 常见问题与解决方案 🛑
问题1: 浏览器不支持 SSE
解决方案
SSE 是现代浏览器的标准功能，但为了确保兼容性，可以使用功能检测并提供回退方案。
if (!!window.EventSource) {
// 使用 SSE
} else {
// 提供回退方案，例如轮询
}问题2: 服务器端事件流中断
解决方案
SSE 连接可能会因为各种原因中断，例如网络问题。EventSource 对象会自动尝试重新连接，但可以在 onerror 事件处理程序中处理重连逻辑。
source.onerror = function(event) {
console.error('EventSource 错误:', event);
setTimeout(() => {
source.close();
source = new EventSource('server.php');
}, 5000); // 5秒后重连
};问题3: 服务器端事件流数据格式错误
解决方案
确保服务器端返回的数据格式正确，每条消息以 data: 开头，以两个换行符 \n\n 结束。
echo "data: 这是一条消息\n\n";🎉 结论 🎉
服务器发送事件（SSE）是一种简单而强大的技术，可以帮助您实现实时数据推送。通过本文的介绍，相信您已经掌握了如何在网页中使用 SSE，并解决常见的问题。希望这篇文章能帮助您更好地利用这一技术，构建更加智能和用户友好的应用！
希望这些信息对您有所帮助！如果还有其他问题或需要进一步的帮助，请随时留言交流。😊
暂无评论内容