什么是 Server-Sent Events
Server-Sent Events（SSE）是一种 HTML5 规范，它提供了一种在客户端和服务器之间实时通信的机制。与 WebSocket 不同，SSE 是一种基于 HTTP 的单向通信协议，服务器可以向客户端推送数据，而客户端只能接收数据。
SSE 的数据格式是纯文本，可以是任何形式，比如 JSON、XML、HTML 等。SSE 的主要用途是实现实时通知、实时聊天、实时数据更新等场景。
如何使用 Server-Sent Events
服务器端实现
在服务器端，我们需要创建一个 HTTP 连接，然后向客户端发送 SSE 格式的数据。下面是一个 Node.js 服务器的示例代码：
const http = require('http');
http.createServer((req, res) => {
// 设置响应头
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 发送 SSE 数据
setInterval(() => {
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 1000);
}).listen(3000);在上面的代码中，我们使用 http.createServer 方法创建了一个 HTTP 服务器，然后设置了响应头，包括 Content-Type、Cache-Control 和 Connection。其中 Content-Type 设置为 text/event-stream 表示返回的数据是 SSE 格式。
接着我们使用 setInterval 方法每秒钟向客户端发送一个 SSE 数据，数据格式为 data: 数据内容\n\n，其中 \n\n 表示数据的结束符。
客户端实现
在客户端，我们需要使用 JavaScript API 来接收 SSE 数据，并处理数据。下面是一个简单的示例代码：
const source = new EventSource('/sse');
source.addEventListener('message', event => {
console.log(`Received: ${event.data}`);
});在上面的代码中，我们使用 EventSource API 创建了一个 SSE 连接，连接的地址是 /sse。然后我们监听了 message 事件，当服务器发送数据时，会触发该事件，我们在事件处理函数中处理数据。
Server-Sent Events 的优缺点
优点
- SSE 基于 HTTP，不需要额外的协议和端口，可以穿透防火墙。
- SSE 简单易用，不需要像 WebSocket 那样进行握手和心跳等复杂的操作。
- SSE 支持断线重连，当连接断开时会自动重新连接。
- SSE 支持多个事件流，可以使用不同的事件类型来区分不同的数据流。
缺点
- SSE 是单向通信，只能服务器向客户端推送数据，不能实现双向通信。
- SSE 的数据格式是纯文本，不能传输二进制数据。
- SSE 的兼容性不如 WebSocket，不支持 IE 浏览器。
总结
Server-Sent Events 是一种基于 HTTP 的实时通信协议，它可以实现服务器向客户端推送数据的功能。相比 WebSocket，SSE 更简单易用，不需要进行握手和心跳等复杂的操作，但它只能实现单向通信，不能实现双向通信。在实现实时通知、实时聊天、实时数据更新等场景中，SSE 是一种不错的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c5bc4fadd4f0e0ff044b51