什么是 SSE（Server-Sent Events）？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务端推送技术，它采用纯文本格式传输数据，主要用于前端实时通讯和信息推送上。与 WebSocket 或 Comet 技术不同，SSE 不需要双方建立长时间持久的连接，而是通过浏览器与服务器之间的一条单向通道推送消息，节省了客户端和服务端资源开销，也提高了系统的稳定性。
SSE 的优点
- 因为只需要建立一次 HTTP 连接，客户端和服务端不需要一直保持联系，不会占用过多网络带宽和服务端资源，降低了服务器压力。
- SSE 使用的是纯文本格式，与其他二进制协议相比，数据占用空间更小，传输速度更快。
- SSE 不需要客户端和服务器之间建立双向通信，而是通过浏览器与服务器之间的一条单向通道推送消息，使系统更加稳定。
- SSE 对浏览器的支持度较高，如果浏览器不支持 SSE，可以通过类库来实现。
SSE 的实现步骤
下面我们通过一步步实现一个简单的 SSE 示例来了解 SSE 的实现方法。
HTML 部分
首先在HTML中加入以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<h1>SSE Example</h1>
<div id="sse">
<h2>Responses:</h2>
<ul></ul>
</div>
<script>
if(typeof(EventSource)!=="undefined") {
var source = new EventSource("sse_server.php");
source.onmessage = function(event) {
var li = document.createElement("li");
li.textContent = event.data;
document.getElementById("sse").getElementsByTagName("ul")[0].appendChild(li);
};
} else {
document.getElementById("sse").innerHTML = "Sorry, your browser does not support SSE...";
}
</script>
</body>
</html>这是一个 SSE 示例的 HTML 页面，其中：
EventSource是一个 JavaScript API，用于接受服务端推送的消息。- 在
EventSource的onmessage事件中，我们将服务端推送的消息动态添加到ul列表中，实现实时显示推送消息的效果。 - 通过判断浏览器是否支持 SSE，如果不支持，则提示浏览器不支持 SSE。
PHP 部分
在服务器端，我们通过 PHP 来实现 SSE 的推送。以下是一个简单的 PHP 代码：
// javascriptcn.com 代码示例
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while(1) {
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
sleep(1);
}
?>这段代码：
- 声明了输出的内容类型为 text/event-stream。
- 禁止了缓存，使浏览器能够及时获取新的数据。
- 不断循环推送当前服务端时间的消息，并将消息以流的形式输出至客户端。
运行示例
在浏览器中打开我们的 SSE 页面，就能看到实时显示服务端时间的效果。同时，PHP 端会将服务端当前时间不断推送至客户端，实现了实时通讯和信息推送的功能。
总结
SSE 是一种高效、稳定的服务端推送技术，能够有效地提升前端实时通讯和信息推送的效率。本文主要介绍了 SSE 的优点、实现步骤和一个简单的 SSE 示例，希望能够帮助大家更好地了解 SSE 的原理和使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653d53717d4982a6eb7305fb