在前端开发中，我们经常需要实现实时更新数据的功能，比如聊天室、股票行情、新闻推送等。传统的实现方式是轮询或者 WebSocket，但这两种方式都有一些缺点。轮询会造成网络流量浪费，而 WebSocket 需要服务器支持，不够灵活。本文介绍一种新的技术——Server-Sent Events，它可以实现 Ajax 推送，解决了以上问题。
Server-Sent Events 简介
Server-Sent Events（简称 SSE）是一种基于 HTTP 的实时推送技术，它可以让服务器向客户端推送数据，而不需要客户端主动发起请求。SSE 使用了浏览器内置的 EventSource 对象来接收服务器推送的数据。与 WebSocket 相比，SSE 更加轻量级，不需要特殊的协议支持，可以兼容所有现代浏览器。
实现 SSE
下面我们来看一下如何实现 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(() => {
const data = new Date().toLocaleTimeString();
res.write(`data: ${data}\n\n`);
}, 1000);
}).listen(3000);上述代码中，我们创建了一个 HTTP 服务器，并监听 3000 端口。当客户端访问该接口时，服务器会向客户端推送当前时间，每秒钟推送一次。注意，我们设置了响应头的 Content-Type 为 text/event-stream，这是 SSE 的标准响应头。同时，我们也设置了 Cache-Control 为 no-cache，表示不缓存响应结果，以保证数据实时更新。
接下来，我们在客户端使用 EventSource 对象来接收服务器推送的数据，代码如下：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', (event) => {
console.log(event.data);
});上述代码中，我们创建了一个 EventSource 对象，指定了 SSE 的接口地址 /sse。然后，我们注册了 message 事件的监听器，当服务器向客户端推送数据时，就会触发该事件，并将数据传递给监听器。在这个例子中，我们只是简单地将数据打印到控制台上，实际应用中，我们可以根据需要对数据进行处理和展示。
指导意义
SSE 技术可以解决实时数据更新的需求，同时也避免了轮询和 WebSocket 的缺点。但是，需要注意的是，SSE 只适用于服务器向客户端推送数据，不能用于客户端向服务器发送数据。另外，SSE 也有一些局限性，比如不支持跨域访问、不支持二进制数据等。因此，在实际应用中，我们需要根据具体需求，选择合适的技术来实现实时数据更新功能。
总结
本文介绍了如何使用 Server-Sent Events 实现 Ajax 推送。我们首先了解了 SSE 的基本原理和特点，然后实现了一个简单的 SSE 接口和客户端代码。最后，我们总结了 SSE 技术的优缺点和适用场景。希望本文能够对读者理解 SSE 技术和实现实时数据更新功能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c60e47d4982a6eb6872b0