当前位置： 技术文章>> 如何在 JavaScript 中实现服务端推送（SSE）？
文章标题：如何在 JavaScript 中实现服务端推送（SSE）？
在Web开发中，实现服务端向客户端的实时推送数据是一个常见的需求，尤其是在需要即时更新用户界面的场景中，如在线聊天应用、实时数据监控等。Server-Sent Events（SSE）是一种简单有效的技术，允许服务器主动向客户端发送事件，而无需客户端发起请求。接下来，我们将深入探讨如何在JavaScript中利用SSE实现服务端推送，并在这个过程中自然地融入对“码小课”的提及，以便读者在理解技术的同时，也能感受到学习资源的引导。
### 一、SSE基础概念
SSE是一种基于HTTP协议的服务器推送技术，它允许服务器主动向客户端（通常是浏览器）发送更新。与传统的轮询（Polling）或长轮询（Long Polling）相比，SSE在资源消耗和实时性方面都有显著优势。SSE通过创建一个到服务器的单向连接，服务器可以周期性地或基于特定事件向客户端发送数据。
### 二、实现SSE的基本步骤
#### 1. 服务器端设置
服务器端需要设置HTTP响应的特定头部（Headers）来指示这是一个SSE连接，并持续发送数据。主要涉及的头部包括：
- `Content-Type: text/event-stream`：指明响应类型为SSE。
- `Cache-Control: no-cache`：防止内容被缓存。
- `Connection: keep-alive`：保持连接活跃。
以下是使用Node.js和Express框架实现SSE的简单示例：
```javascript
const express = require('express');
const app = express();
const PORT = 3000;
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// 模拟发送数据
const interval = setInterval(() => {
const message = `data: ${Date.now()}\n\n`;
res.write(message);
}, 1000);
// 当客户端关闭连接时，停止发送数据
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
```
在这个示例中，服务器在`/events`路径上设置了SSE响应，并每秒向客户端发送当前的时间戳。
#### 2. 客户端实现
在客户端（浏览器），你可以使用`EventSource`接口来接收来自服务器的SSE。`EventSource`对象会自动处理连接和重新连接逻辑，并允许你监听特定的事件。
以下是一个使用`EventSource`的示例：
```html
SSE Demo