在 Web 开发中，实时数据通信是一个非常重要的话题。在过去，开发者们通常使用轮询或者 WebSocket 来实现实时通信。但是这些方法都有一些缺点，比如轮询会增加服务器的负担，WebSocket 需要在客户端和服务器之间建立一个持久连接。而 Server-Sent Events（简称 SSE）则提供了一种更加简单、轻量级的解决方案，可以实现实时数据通信，而且无需依赖浏览器插件。
什么是 Server-Sent Events？
Server-Sent Events 是一种基于 HTTP 的协议，它可以让服务器向客户端推送数据。这个协议是 HTML5 标准的一部分，因此大多数现代浏览器都支持 SSE。
SSE 的工作原理很简单：客户端向服务器发送一个 HTTP 请求，请求头中包含了一个特殊的字段 Accept: text/event-stream，这个字段告诉服务器客户端希望接收 SSE 数据。服务器在收到这个请求后，会保持连接处于打开状态，并不断地向客户端发送数据。这些数据被组织成一些列的事件，每个事件都包含一个事件名和一些数据。客户端可以通过 JavaScript 来监听这些事件，并在事件发生时执行相应的操作。
如何使用 Server-Sent Events？
使用 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'
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`event: time\ndata: ${data}\n\n`);
}, 1000);
});
server.listen(3000);这段代码创建了一个简单的 HTTP 服务器，每隔一秒钟向客户端发送一个时间事件。事件名为 time，数据为当前时间的字符串表示。
注意到响应头中的一些特殊字段：Content-Type 设置为 text/event-stream，告诉浏览器这是一段 SSE 数据；Cache-Control 设置为 no-cache，禁止浏览器缓存这个响应；Connection 设置为 keep-alive，告诉服务器保持连接处于打开状态。
客户端代码
const source = new EventSource('/sse');
source.addEventListener('time', (event) => {
const time = event.data;
console.log(`The server time is ${time}`);
});这段代码创建了一个 EventSource 对象，向服务器发起 SSE 请求。/sse 是服务器端代码中创建的 HTTP 服务器的地址。然后，我们通过 addEventListener 方法来监听 time 事件，当事件发生时，会执行回调函数，打印当前时间的字符串表示。
总结
Server-Sent Events 是一种非常简单、轻量级的实时数据通信协议，可以让服务器向客户端推送数据，无需依赖浏览器插件。在实际的开发中，我们可以使用 SSE 来实现实时聊天、实时通知等功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657efe39d2f5e1655d9de8f3