首页html ServerSentEvent

html ServerSentEvent

时间: 2023-12-01 15:42:43 浏览: 111

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()函数来确保消息被立即发送到客户端。

阅读全文