Server-Sent Events (SSE) 实现从服务器到客户端的实时数据流

前期回顾

避免阻塞主线程 —— Web Worker 示例项目-CSDN博客https://blog.csdn.net/m0_57904695/article/details/136721297?spm=1001.2014.3001.5501

@CSDN 彩色之外

📝 前言

🛠️ 安装

✂️ 运行服务器

✂️ 运行index.html

♻️ 贡献

仓库点我👉及时推送到客户端消息

@CSDN 彩色之外

📝 前言

Server-Sent Events (SSE) 是什么？

Server-Sent Events (SSE) 是一种允许服务器主动向客户端发送更新的技术。与 WebSocket 不同，SSE 是单向通信，仅从服务器到客户端。这对于实时更新场景（如股票价格更新、新闻订阅、天气推送、每日笑话等）非常有用，而且实现起来比 WebSocket 简单。

这个项目演示了如何使用 Server-Sent Events (SSE) 实现从服务器到客户端的实时数据流。它包括一个简单的 Node.js 服务器，使用 Express 框架设置 SSE 端点，以及一个 HTML 页面，通过 EventSource 接口接收来自服务器的消息。

服务器每秒像客户端发送一次服务端生成的时间

index.html

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>EventSource 示例</title>
</head><body><h2>服务器发送的消息：</h2><ul id="messages"></ul><script>// 创建一个指向你的服务器端点的 EventSource 实例var eventSource = new EventSource('http://localhost:3000/events');// 使用 onmessage 事件监听器来接收消息eventSource.onmessage = function (event) {// 获取消息列表的元素var messagesElement = document.getElementById('messages');// 创建一个新的列表项元素，并设置其内容为接收到的消息var messageElement = document.createElement('li');messageElement.textContent = event.data;// 将新的列表项添加到消息列表中messagesElement.appendChild(messageElement);};// 监听错误事件eventSource.onerror = function (error) {console.error('EventSource failed:', error);// 在出现错误时关闭 EventSourceeventSource.close();};</script>
</body></html>

server.js

const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 3000;// 设置根URL的GET路由
app.get("/", (req, res) => {res.send(`<b>Hello, World!</b> - <br>使用 VS Code 的 Five Server<br> 1. 在 VS Code 中安装 Five Server 扩展。<br> 2. 与 Live Server 类似，重启 VS Code，打开你的项目文件夹。<br> 3. 找到你的 HTML 文件，右键点击并选择“Open with Five Server”。`);
});// 允许跨域请求
app.use(cors());app.get("/events", (req, res) => {res.setHeader("Content-Type", "text/event-stream");res.setHeader("Cache-Control", "no-cache");res.setHeader("Connection", "keep-alive");// 发送消息到客户端const sendMessage = () => {const data = `服务器时间: ${new Date()}`;res.write(`data: ${data}\n\n`);// 每秒发送一次setTimeout(sendMessage, 1000);};sendMessage();
});app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});