Server-sent Events(SSE) 是一种实现服务器端推送事件到客户端的技术。它使用简单的 HTTP 协议，能够保持长时间的连接，让服务器能够实时地将数据推送到客户端。在现代的实时 Web 应用中，SSE 是一种非常重要的技术，它可以提高应用的实时性、可靠性和性能。
SSE 的基本原理
SSE 基于简单的 HTTP 协议实现，通过在客户端与服务器之间建立一个持久的连接，使得服务器能够实时地推送事件到客户端。这种连接是一种单向的、文本流式的连接，只能由服务器端向客户端推送数据。
在 SSE 中，客户端会发送一个 GET 请求到服务器，服务器返回一个带有 "text/event-stream" MIME 类型的响应。这个响应包含了一个无限长的、不断变化的文本流，其中每个事件都有一个固定的格式：
event: <event name> data: <event data> id: <event ID> retry: <retry time>
其中，每个事件都以一个 "event" 字段开头，代表事件的名称；"data" 字段包含了事件的实际数据；"id" 字段是可选的，用于指定事件的唯一 ID；"retry" 字段也是可选的，用于在连接断开后等待多久再次发起连接。
客户端通过监听这个文本流，即可实时地获取到服务器推送的事件，从而实现实时应用。由于 SSE 本质上是基于 HTTP 的，所以支持 SSE 的服务器和客户端都比较容易实现和维护。
SSE 的事件监听机制
在 SSE 中，客户端需要通过一些机制来监听服务器推送的事件。最常用的是使用 JavaScript，在客户端页面中创建一个新的 EventSource 对象，来监听服务器的事件。
var source = new EventSource(url);
其中，"url" 参数是服务器端 SSE 资源的 URL，用于建立与服务器的连接。一旦连接建立完成，客户端就可以通过 "onmessage" 事件来监听服务器推送的事件。
source.onmessage = function(event) {
var data = event.data;
console.log("Received data: " + data);
}在服务器端，推送一个 SSE 事件也比较简单。只需要发送一个符合 SSE 格式的数据到客户端即可。下面是一个简单的 Node.js 服务器端实现：
var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write("retry: 10000\n");
setInterval(function() {
var date = new Date();
res.write('event: time\n');
res.write('data: ' + date.toISOString() + '\n\n');
}, 1000);
}).listen(8080);这个服务器会向客户端推送一个每秒钟更新一次的时间事件，并等待客户端的响应。通过以上代码，我们可以轻松地构建一个实时应用，从而提高应用的实时性和可靠性。
总结
SSE 是一种简单而强大的技术，可以实现服务器端向客户端推送事件的实时应用。通过 SSE，我们可以轻松构建实时应用，并提高应用的可靠性和性能。在今后的 Web 开发中，SSE 将成为一个必备的工具，帮助我们更好地实现实时应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65964e97eb4cecbf2da24e4b