以下是一个简单的使用 HTML5 SSE 的例子：
1. 服务器端脚本（server.php）：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
// 模拟一些实时数据
$data = array('message' => 'Hello, this is a server-sent event!', 'timestamp' => time());
// 将数据发送给客户端
echo "data: " . json_encode($data) . "\n\n";
flush();
// 模拟每隔一秒发送一次数据
sleep(1);
?>
在这个例子中，服务器端使用 PHP 创建了一个 SSE 流。它发送一些实时数据给客户端，然后休眠一秒钟，模拟每隔一秒钟向客户端推送一次数据。
2. 客户端 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>SSE Example</title>
</head>
<body>
<h1>SSE Example</h1>
<script>
// 创建一个 EventSource 对象，与服务器建立 SSE 连接
const eventSource = new EventSource('server.php');
// 监听来自服务器的消息
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
console.log('Message from server:', data);
// 在页面上显示实时数据
const messageElement = document.createElement('p');
messageElement.textContent = data.message + ' (Timestamp: ' + data.timestamp + ')';
document.body.appendChild(messageElement);
};
// 处理连接关闭事件
eventSource.onclose = function() {
console.log('SSE connection closed.');
};
</script>
</body>
</html>
在客户端，通过创建一个 EventSource 对象，可以与服务器建立 SSE 连接。然后，通过监听 onmessage 事件，可以在接收到来自服务器的消息时执行相应的操作。在这个例子中，收到的消息被解析为 JSON 格式，然后在页面上显示出来。
需要注意的是，SSE 是一种单向通信，只能由服务器向客户端推送数据。客户端不能像 WebSocket 那样向服务器发送数据。 SSE 在实时更新内容（如实时新闻、股票价格、实时通知等）方面非常有用。
转载请注明出处：http://www.zyzy.cn/article/detail/12440/HTML