在前端开发中，我们经常需要实现实时数据更新的功能。传统的轮询和长轮询方式虽然可以实现这一功能，但是都存在着效率低、占用资源多等问题。而 WebSocket 一度成为解决这些问题的良好方案，但是由于其需要进行握手等操作，对于一些小型应用来说过于繁琐。在此情况下，Server-Sent Events（SSE）应运而生。
什么是 Server-Sent Events
服务器推送事件（SSE）是一种轻量级的客户端/服务器通信协议，允许服务器端向客户端推送数据。相比于 WebSocket 来说，SSE 有更加简单的 API 和协议，在小型应用开发中更为适合。
SSE 的实现方式借助于长轮询（即在服务端保持连接并不停地发送消息）的基础上，区别在于 SSE 的连接是由客户端建立并维持的。而每次服务器端有新的数据需要推送时，就会通过 SSE 连接将数据发送给客户端。
SSE 的使用方法
服务端
服务端实现 SSE 需要在 HTTP 响应头中设置 Content-Type 字段为 text/event-stream，并且添加一些 SSE 特有的字段，比如设置每次发送数据时的延迟时间（以毫秒为单位）等。
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 每 1 秒向客户端发送一条数据
setInterval(() => {
res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
}, 1000);
});客户端
客户端可以使用 EventSource API 与 SSE 服务器进行通信，通过监听 message 事件来获取服务端发送的数据。需要注意的是，使用 SSE 时，客户端不需要对连接进行关闭操作，因为 SSE 连接是由客户端自行维持的。
const source = new EventSource('/sse');
source.onmessage = (event) => {
console.log('Received message: ' + event.data);
};SSE 的优点
相比于 WebSocket，SSE 有一些优点：
- 简单易用：SSE 只是在 HTTP 连接的基础上增加了一些 SSE 特有的字段，实现起来非常简单。
- 轻量级：相比于 WebSocket，SSE 的握手过程更加简单，不需要大量的带宽和资源。
- 无需自定义协议：SSE 是基于 HTTP 协议实现的，因此不需要像 WebSocket 那样自定义协议，与现有的 Web 技术更加兼容。
总结
本文介绍了 SSE 的基本使用方法和优点。相比于传统的轮询和长轮询，SSE 能够更加高效地实现实时数据的传输。但是要注意，SSE 的使用也有其限制：由于 SSE 是基于 HTTP 的，因此在一些需要高并发、低时延的场景下可能不适合。在实际应用中需要根据具体场景进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a64c97d4982a6eb466c6a