在前端开发中，我们经常需要向服务器发送请求以获取数据或者更新页面内容。但是，传统的请求-响应模式并不适用于实时数据的更新，因为它需要不断地向服务器发送请求，这会影响性能和带宽消耗。为了解决这个问题，HTML5 引入了 Server-Sent Events 技术。
什么是 Server-Sent Events？
Server-Sent Events（简称 SSE）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送数据，而不需要客户端发起请求。它使用了浏览器内置的 EventSource API，可以在客户端与服务器之间建立持久连接，以便实时地推送数据到客户端。
相比于其他实时通信技术，如 WebSocket 或者长轮询（Long Polling），SSE 更加简单易用，且不需要额外的协议或者库支持。
如何使用 Server-Sent Events？
使用 SSE 非常简单，只需要在服务器端设置响应头，将 Content-Type 设置为 text/event-stream，并在响应体中返回格式化的数据即可。客户端可以通过 EventSource API 来监听服务器的推送事件。
下面是一个简单的示例代码：
服务器端代码
// 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().toISOString()}\n\n`;
res.write(data);
}, 1000);
}).listen(3000);
console.log('Server running at http://localhost:3000/');这段代码会创建一个 HTTP 服务器，每隔一秒向客户端推送当前时间。
客户端代码
const source = new EventSource('http://localhost:3000/');
source.addEventListener('message', function(event) {
console.log(event.data);
});这段代码会使用 EventSource API 来监听服务器推送的消息，并将其输出到控制台。
Server-Sent Events 的优点
使用 SSE 可以带来以下的优点：
1. 减少网络流量
传统的请求-响应模式需要客户端不断地向服务器发送请求，这会带来大量的网络流量。而 SSE 可以在建立连接后，只向客户端推送必要的数据，从而减少网络流量。
2. 实时性更好
SSE 可以建立持久连接，实时地推送数据到客户端，可以实现更好的实时性。
3. 更简单易用
相比于其他实时通信技术，如 WebSocket 或者长轮询，SSE 更加简单易用，且不需要额外的协议或者库支持。
Server-Sent Events 的适用场景
SSE 适用于以下场景：
1. 实时更新数据
如果需要实时地更新数据，如在线聊天、股票行情等，使用 SSE 可以实现更好的用户体验。
2. 减少网络流量
如果需要减少网络流量，如监控系统、实时日志等，使用 SSE 可以有效地减少网络流量。
总结
Server-Sent Events 是一种基于 HTTP 的服务器推送技术，可以实现实时更新数据，减少网络流量，更加简单易用。它适用于实时更新数据和减少网络流量的场景。我们可以通过 EventSource API 来监听服务器的推送事件，从而实现更好的实时性和用户体验。
希望本文能够对你了解 Server-Sent Events 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b7e097d4982a6eb5d52ef