html ServerSentEvent
时间: 2023-12-01 22:42:43 浏览: 106
浅谈HTML5 服务器推送事件(Server-sent Events)
5星 · 资源好评率100%
HTML5的Server-Sent Event(SSE)是一种允许服务器向客户端推送事件的技术。与传统的HTTP请求不同,SSE允许服务器向客户端发送数据,而无需客户端明确地请求。这种单向通信的方式使得SSE非常适合用于实时应用程序,例如股票报价、天气预报、社交媒体更新等。
SSE的工作原理是通过在服务器上创建一个持久连接,该连接保持打开状态,直到服务器有数据要发送给客户端。当服务器有新数据时,它会将数据发送到客户端,客户端通过监听事件来接收数据。SSE使用了EventSource API来实现这种事件监听机制。
以下是一个简单的SSE示例,其中服务器每隔1秒向客户端发送一条消息:
```html
<!DOCTYPE html>
<html>
<head>
<title>Server-Sent Event Example</title>
</head>
<body>
<div id="messages"></div>
<script>
var eventSource = new EventSource("server.php");
eventSource.onmessage = function(event) {
document.getElementById("messages").innerHTML += event.data + "<br>";
};
</script>
</body>
</html>
```
在上面的示例中,服务器端代码可以是PHP、Node.js或其他任何支持SSE的服务器端语言。在本例中,服务器端代码是一个名为server.php的文件,其内容如下:
```php
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$i = 0;
while (true) {
echo "data: This is message " . $i++ . "\n\n";
ob_flush();
flush();
sleep(1);
}
?>
```
在上面的PHP代码中,我们首先设置了响应头,告诉浏览器这是一个SSE响应。然后我们使用一个无限循环来模拟服务器不断发送消息的情况。每次循环中,我们都会向客户端发送一条消息,并使用ob_flush()和flush()函数来确保消息被立即发送到客户端。
阅读全文