什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许服务器向客户端发送事件流，从而实现实时更新页面内容的功能。
与传统的轮询方式相比，SSE 通过建立持久连接，避免了频繁地请求服务器，从而减少了网络带宽的占用和服务器的负载。
如何使用 SSE？
服务器端
在服务器端，我们需要使用特定的 MIME 类型 text/event-stream 来指示浏览器当前请求的是一个 SSE 事件流。同时，在响应头中需要添加 Cache-Control 和 Connection 字段，以保证 SSE 连接的稳定性。
下面是一个使用 Node.js 实现 SSE 服务器的示例代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = `data: ${new Date().toLocaleString()}\n\n`;
res.write(data);
}, 1000);
}).listen(8080);上面的代码中，我们使用 setInterval 函数每隔 1 秒向客户端发送一个包含当前时间的 SSE 事件。
客户端
在客户端，我们可以使用 JavaScript 中的 EventSource 对象来接收服务器发送的 SSE 事件。
EventSource 对象是浏览器内置的 API，它会自动建立 SSE 连接，并在接收到服务器发送的事件时触发 onmessage 事件回调函数。
下面是一个使用纯 JavaScript 实现 SSE 客户端的示例代码：
const eventSource = new EventSource('http://localhost:8080');
eventSource.onmessage = event => {
const message = event.data;
console.log(message);
};上面的代码中，我们使用 new EventSource(url) 方法创建了一个 SSE 连接，并在 onmessage 事件回调函数中输出了服务器发送的事件内容。
SSE 的优缺点
优点
- 实现了实时更新页面内容的功能，无需手动刷新页面。
- 通过建立持久连接，减少了网络带宽的占用和服务器的负载。
- 相对于 WebSockets，SSE 更加简单易用，不需要专门的协议和握手过程。
缺点
- SSE 的浏览器支持性较差，IE 和 Edge 浏览器不支持 SSE。
- SSE 仅支持服务器向客户端单向传输数据，无法实现双向通信。
- SSE 无法处理大量数据，因为浏览器会在接收到每个 SSE 事件时执行
onmessage回调函数，可能会导致页面卡顿。
总结
SSE 是一种实现动态更新页面内容的有效技术，它通过建立持久连接，避免了频繁地请求服务器，从而减少了网络带宽的占用和服务器的负载。但是，SSE 的浏览器支持性较差，无法实现双向通信，并且无法处理大量数据，需要根据具体的业务需求来选择使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65741655d2f5e1655dd501be