什么是 SSE
SSE（Server-Sent Events）是一种服务器推送技术，它允许服务器向客户端发送事件流（event stream），并在客户端自动更新网页内容。SSE 使用简单、轻量级，是一种比 WebSocket 更加简单的实现方式。
SSE 的使用场景
SSE 的使用场景非常广泛，以下是一些常见的场景：
实时数据更新
SSE 可以实现实时数据更新，比如在线聊天、股票行情、天气预报等。当服务器有新的数据更新时，就可以通过 SSE 向客户端发送事件流，从而实现实时更新。
长轮询（Long Polling）替代
在传统的长轮询中，客户端向服务器发送一个请求，服务器会一直保持连接，直到有新的数据更新时才返回响应。SSE 可以替代长轮询，使得客户端可以通过一个连接一直接收服务器推送的数据。
服务器状态监控
SSE 可以用于服务器状态监控，当服务器状态发生变化时，就可以通过 SSE 向客户端发送事件流，从而实现实时监控。
SSE 的优势
与传统的 Ajax 请求相比，SSE 有许多优势：
实时性
SSE 可以实现实时数据更新，不需要客户端不断地向服务器发起请求，从而节约了带宽和服务器资源。
简单性
SSE 的实现非常简单，只需要使用原生的 JavaScript 就可以实现。
兼容性
SSE 在现代浏览器中都有良好的兼容性，而且可以通过 polyfill 实现在旧浏览器中的兼容。
SSE 的示例代码
以下是一个使用 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(() => {
res.write(`data: ${new Date()}\n\n`);
}, 1000);
}).listen(3000);客户端代码
const eventSource = new EventSource('http://localhost:3000');
eventSource.onmessage = (event) => {
console.log(event.data);
};在上面的示例中，服务器每隔一秒钟就会向客户端发送一个事件流，客户端则可以通过 EventSource 对象监听 onmessage 事件，从而实现实时更新。
总结
SSE 是一种非常有用的服务器推送技术，可以用于实时数据更新、长轮询替代、服务器状态监控等场景。SSE 的实现非常简单、兼容性良好，是一种非常值得推广的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656973ded2f5e1655d2058bb