在前端开发中，我们经常需要和服务器进行通信，比如向服务器发送请求获取数据、提交表单等等。通常情况下，这种通信都是客户端向服务器发送请求，服务器返回响应的模式。但在某些情况下，我们需要实现服务器主动向客户端推送消息的功能，比如实时聊天、在线状态变更等等，这时候就可以使用 SSE（Server-Sent Events）技术实现。
什么是 SSE？
SSE 是一种基于 HTTP 协议的服务器推送技术，它允许服务器实时向客户端发送事件流（Event Stream）。客户端通过监听这个事件流，可以实时获取服务器端推送的消息，从而实现了服务器主动向客户端推送消息的功能。
SSE 的优点在于它使用简单、易于实现，不需要像 WebSocket 那样实现繁琐的握手协议，同时实现了服务器向客户端主动推送消息的功能。
SSE 的使用
1. 实现 SSE 服务器端
在服务器端实现 SSE，需要返回一个 Content-Type 为 "text/event-stream" 的响应，同时将消息以特定格式发送给客户端。以 Node.js 为例，下面是一个简单的 SSE 服务器实现：
// javascriptcn.com 代码示例
const http = require("http");
http.createServer(function (req, res) {
// 设置响应头
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive",
});
// 利用定时器实现每秒向客户端发送一次消息
setInterval(() => {
const data = {
message: `当前时间： ${new Date().toLocaleString()}`,
};
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
}).listen(3000, () => {
console.log("SSE 服务器运行在 http://127.0.0.1:3000 上");
});在这个例子中，我们在服务器端通过 setInterval 定时器实现每秒向客户端发送一次消息，消息格式为 data: ${JSON.stringify(data)}\n\n，其中 data 表示消息内容，每条消息以 \n\n 结尾。
2. 在客户端接收 SSE 消息
在客户端接收 SSE 消息，可以使用 JavaScript 中的 EventSource 对象。使用 EventSource 可以监听服务器端发送的事件流，在事件流到达时触发指定的回调函数，以实现对服务器推送消息的处理。
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SSE 通信示例</title>
</head>
<body>
<h1>当前时间：</h1>
<div id="msg"></div>
<script>
const eventSource = new EventSource("http://127.0.0.1:3000");
// 监听服务器端发送的事件流，触发回调函数处理消息
eventSource.addEventListener("message", function (event) {
const data = JSON.parse(event.data);
document.querySelector("#msg").innerHTML = data.message;
});
</script>
</body>
</html>在这个例子中，我们在客户端使用 EventSource 对象监听 "http://127.0.0.1:3000" 上的事件流，当有消息到达时，使用 JSON.parse 解析消息内容，并将消息内容显示在页面上。需要注意的是，EventSource 对象仅在支持 SSE 技术的浏览器中可用。
总结
SSE 技术是一种基于 HTTP 协议的服务器推送技术，它允许服务器实时向客户端发送事件流，从而实现了服务器推送消息的功能。SSE 技术使用简单、易于实现，是实时通信、轻量级推送消息的首选技术之一。
通过上面的介绍，我们可以学习到 SSE 的基本使用方法。在具体应用中，我们还可以根据实际情况进行优化，比如实现服务器端向多个客户端推送消息、设置超时时间等等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653ce7f07d4982a6eb6dac7a