SSE(Server-Sent Events)
时间: 2024-07-24 18:00:33 浏览: 87
SSE (Server-Sent Events) 是一种在 Web 开发中用于实时数据推送的技术。它允许服务器向客户端发送持续的数据流,而无需客户端频繁地发起请求。SSE 实现了单向通信,即服务器主动向浏览器推送数据,而浏览器不会发起请求,除非用户离开页面或关闭连接。
SSE 工作原理如下:
1. **连接建立**:服务器创建一个 HTTP 长连接,并设置 Content-Type 为 'text/event-stream',告诉浏览器这是一个事件流。
2. **事件推送**:服务器通过 `data:` 前缀和换行符分隔的文本块来发送事件,每个事件通常包含一个事件名称和可选的事件数据。
3. **事件标识**:每个事件通常会有一个事件标识符,但不是必需的,用于标识特定的事件类型。
4. **断线处理**:如果客户端不再接收事件或断开连接,服务器会自动关闭连接,客户端也可以通过指定超时时间或关闭连接请求来结束连接。
相关问题
Server-Sent Events demo
以下是一个基本的Server-Sent Events示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Server-Sent Events Demo</title>
<meta charset="UTF-8">
</head>
<body>
<div id="sse">
<h1>Server-Sent Events Demo</h1>
</div>
<script>
if(typeof(EventSource)!=="undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("sse").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("sse").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
```
PHP代码:
```
<?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();
?>
```
在上面的示例中,HTML页面通过JavaScript创建一个新的EventSource对象,该对象连接到一个名为“demo_sse.php”的PHP文件。PHP文件发送一个包含服务器时间的数据消息,并在每次发送消息后进行缓冲刷新,以确保消息立即传输给客户端。在HTML页面中,每当从服务器接收到新的消息时,将其添加到页面中的“sse”元素中。
SSE(Server-Sent Events)是什么?过程
SSE(Server-Sent Events)是一种Web API,用于在客户端和服务器之间实现服务器发送事件。SSE允许服务器向客户端推送数据,而无需客户端发送请求。这种单向数据流的实现方式,使得SSE比WebSocket更加轻量级,适用于一些简单的推送场景。
SSE的工作原理如下:
1. 客户端通过EventSource对象连接到服务器的SSE端点。
2. 服务器将一个HTTP响应返回给客户端,其中包含SSE的响应头(Content-Type: text/event-stream)和一个空行。
3. 服务器将一系列文本数据(称为事件)作为HTTP响应正文发送回客户端。每个事件都以“event:”开头,后面跟着事件名称,然后是一个或多个“data:”行,其中包含事件数据。每个事件以两个换行符结束。
4. 客户端接收到事件后,将事件数据插入到DOM中,从而实现动态更新页面的效果。
SSE的特点是简单易用、可靠性高、传输效率高、兼容性好。但是,SSE只支持单向数据流,无法实现双向通信。如果需要实现双向通信,需要使用WebSocket协议。