HTML教程-HTML5服务器发送事件(Server-Sent Events)

HTML5服务器发送事件(Server-Sent Events)是一种通过HTTP连接使Web浏览器能够接收来自服务器的自动更新和数据的技术。它实现了从服务器到客户端的单向消息传递。
要使用SSE从服务器接收事件,可以在JavaScript中使用EventSource
对象。以下是一个示例:
<!DOCTYPE html>
<html>
<head>
<title>服务器发送事件示例</title>
</head>
<body>
<h2>服务器发送事件示例</h2>
<div id="output"></div>
<script type="text/javascript">
if (typeof(EventSource) !== "undefined") {
var source = new EventSource("ServerUpdate.php");
source.onmessage = function(event) {
document.getElementById("output").innerHTML += event.data + "<br>";
};
} else {
alert("抱歉,您的浏览器不支持服务器发送事件。");
}
</script>
</body>
</html>
在上面的示例中,使用URL "ServerUpdate.php"
创建了EventSource
对象。每当服务器发送更新时,onmessage
事件被触发,接收到的数据被追加到output
div 中。
要从服务器发送事件,您需要创建一个服务器端脚本,如PHP或ASP。以下是一个使用PHP的示例:
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: 当前服务器时间为: {$time}\n\n";
flush();
?>
在上面的示例中,代码的第一行设置了Content-Type
标头为text/event-stream
,这是服务器端事件标准所需的。第二行指示服务器关闭缓存,以防止服务器更新被缓存。接下来使用echo
语句创建要发送的数据输出,它必须以data:
开头。最后,使用flush()
方法确保数据立即发送到网页。
完整的示例代码可用于从服务器接收并显示更新的数据。
请注意,要在浏览器上执行上述代码,您需要在您的系统上安装一个服务器,并在本地主机上运行。您可以安装任何服务器,如MySQL、XAMPP等。
浏览器支持如下:
API | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
SSE | 6.0 | 不支持 | 6.0 | 11.5 | 5.0 |