在前端开发中，实时数据推送是一项非常重要的技术。传统的实时数据推送方法包括轮询和长轮询，但这些方法都有一些缺点，比如轮询会造成网络流量浪费，而长轮询则会增加服务器负担。
为了解决这些问题，HTML5 提供了一种新的技术：Server-sent Events。它可以在浏览器和服务器之间建立一个持久的连接，使得服务器可以主动向浏览器推送实时数据，而不需要浏览器不断地发送请求。
实现方法
- 在服务器端，首先需要开启 SSE 支持。在 Node.js 中，可以使用
express框架来实现：
// www.javascriptcn.com code example
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/sse', (req, res) => {
res.set({
'Cache-Control': 'no-cache',
'Content-Type': 'text/event-stream',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 1000);
});以上代码中，我们定义了一个 /sse 路由，它返回了一个 text/event-stream 类型的响应。在响应头中，我们设置了 Cache-Control 为 no-cache，这样浏览器就不会缓存这个响应。同时，我们也设置了 Connection 为 keep-alive，这样可以保持连接不断开。
在响应体中，我们使用了 setInterval 函数来每隔一秒钟向客户端推送一条数据。每条数据都以 data: 开头，并且以两个 \n 结尾，这是 SSE 的标准格式。
- 在客户端，我们可以使用 JavaScript 来建立 SSE 连接，并且接收服务器推送的数据：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});以上代码中，我们使用 EventSource 类来建立 SSE 连接，并且指定了服务器端的 /sse 路由。当服务器端推送数据时，message 事件会被触发，我们可以在事件处理函数中处理数据。
示例代码
以下是一个完整的示例代码，可以直接运行在 Node.js 环境中：
// www.javascriptcn.com code example
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/sse', (req, res) => {
res.set({
'Cache-Control': 'no-cache',
'Content-Type': 'text/event-stream',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date().toISOString()}\n\n`);
}, 1000);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});当我们运行这个代码后，可以在控制台中看到每隔一秒钟输出一条数据。
指导意义
使用 Server-sent Events 技术可以极大地提高实时数据推送的效率，同时也可以减少网络流量和服务器负担。但是，需要注意的是，SSE 并不是所有浏览器都支持的，比如 Internet Explorer 和 Edge 都不支持 SSE。因此，在使用 SSE 技术时，需要考虑到浏览器的兼容性问题，并且提供备选方案。
另外，需要注意的是，SSE 的连接是单向的，即只能从服务器向客户端推送数据，客户端无法向服务器发送数据。如果需要双向通信，可以考虑使用 WebSocket 技术。
总之，Server-sent Events 技术是一项非常有用的技术，它可以帮助我们实现更高效的实时数据推送。在实际开发中，需要根据具体情况来选择合适的技术，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d385aca941bf71346b526b