简介
Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，它可以让服务器向客户端发送实时事件。SSE 可以用于实现实时通知、聊天室、在线游戏等实时应用场景。
SSE 的优点是它使用了标准的 HTTP 协议，不需要使用额外的插件或库，支持跨域请求，同时也比 WebSocket 更简单易用。
实现方法
服务端
在服务端，我们需要创建一个 SSE 的连接点，通过这个连接点向客户端发送事件。下面是一个使用 Node.js 和 Express 框架实现 SSE 的示例代码：
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
setInterval(() => {
const data = { message: 'Hello world!' };
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});在上面的代码中，我们创建了一个路由 /sse，当客户端请求这个路由时，我们设置响应头 Content-Type 为 text/event-stream，这样浏览器就知道这是一个 SSE 连接。同时，我们设置响应头 Cache-Control 为 no-cache，这样浏览器不会缓存 SSE 的响应。最后，我们设置响应头 Connection 为 keep-alive，这样连接会一直保持开启，直到客户端关闭连接。
在路由处理函数中，我们使用 setInterval 定时向客户端发送事件，事件的格式为：
event: <event-name> data: <event-data>
其中，event 表示事件名，可以省略。data 表示事件数据，必须以两个换行符结尾。
客户端
在客户端，我们需要创建一个 SSE 的连接，通过这个连接接收服务端发送的事件。下面是一个使用 JavaScript 实现 SSE 的示例代码：
const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log(data.message);
};
eventSource.onerror = (event) => {
console.error('SSE error:', event);
};在上面的代码中，我们创建了一个 EventSource 对象，指定了 SSE 的连接点 /sse。当服务端发送事件时，onmessage 回调函数会被触发，我们可以在这个回调函数中处理事件数据。同时，我们还可以监听 onerror 事件，处理连接错误。
指导意义
SSE 是实现实时通知、聊天室、在线游戏等实时应用场景的一种有效技术方案。通过 SSE，我们可以实现服务端向客户端的实时推送，减少客户端的轮询请求，提高应用的性能和用户体验。
同时，SSE 也有一些限制，比如不支持双向通信、不支持二进制数据等。在选择使用 SSE 还是 WebSocket 时，需要根据具体的应用场景进行考虑。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，可以用于实现实时通知、聊天室、在线游戏等实时应用场景。在服务端，我们需要创建一个 SSE 的连接点，通过这个连接点向客户端发送事件；在客户端，我们需要创建一个 SSE 的连接，通过这个连接接收服务端发送的事件。SSE 与 WebSocket 相比，更简单易用，但也有一些限制。在选择使用 SSE 还是 WebSocket 时，需要根据具体的应用场景进行考虑。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658cd13eeb4cecbf2d298a0d