SSE是基于HTTP的单向文本推送技术,适合日志、状态更新等场景,但不支持二进制流,无法替代音视频推流。

VSCode 本身不提供 Node 运行时或 SSE 推流能力,它只是编辑器;真正起作用的是你本地装的 node、写的 server.js 和浏览器对 EventSource 的支持。SSE(Server-Sent Events)适合低频、单向、文本为主的实时推送(比如日志、状态更新),但**不能替代真正的音视频推流**——它不支持二进制流、无帧率控制、无法承载 FLV/H.264/MP4 片段。如果你真要“推流”,得用 WebRTC、WebSocket + MSE 或 HTTP-FLV,SSE 只能模拟简单数据推送。
确认 Node 环境是否就绪
别跳过这步,很多问题卡在这儿。VSCode 终端里运行 node -v 和 npm -v 必须返回版本号。如果报错 Error: Cannot find module 'express',说明没装依赖,不是环境没配好——直接执行 npm install express 即可。Windows 用户特别注意:安装 Node.js 时勾选“Add to PATH”,否则 VSCode 集成终端可能找不到 node 命令。
用 Express 启一个支持 SSE 的服务端
SSE 本质是 HTTP 长连接,服务端只需设置正确响应头并保持连接打开。Express 是最轻量的选择,不用额外框架。
-
Content-Type必须设为text/event-stream - 响应头
Cache-Control: no-cache和Connection: keep-alive不能漏 - 每次发送数据必须以
data:开头,结尾加双换行(\n\n) - 别用
res.end()主动关闭连接——SSE 要一直挂着
示例 server.js:
立即学习“前端免费学习笔记(深入)”;
const express = require('express');
const app = express();
app.get('/stream', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('data: {"status":"starting"}\n\n');
const interval = setInterval(() => {
res.write(`data: {"ts":${Date.now()}}\n\n`);
}, 1000);
req.on('close', () => {
clearInterval(interval);
res.end();
});
});
app.listen(3000);
HTML5 端用 EventSource 接收并更新 DOM
浏览器原生支持 EventSource,无需第三方库。但注意:http://localhost 下可以跑,file:// 协议下会因 CORS 拒绝连接——所以必须用 Live Server 启服务,不能双击 HTML 打开。
-
EventSource只支持 GET,且自动重连(默认 3s),重连时会带Last-Event-ID头 - 监听
message事件接收无类型消息;监听具体事件名(如open、error)需服务端用event:声明 - JSON 字符串需要手动
JSON.parse(e.data),e.data永远是字符串
前端片段:
<script>
const es = new EventSource('http://localhost:3000/stream');
es.onmessage = e => {
const data = JSON.parse(e.data);
document.body.innerHTML += `<p>${data.ts}</p>`;
};
es.onerror = () => console.error('SSE connection failed');
</script>
Live Server 启动页面而非双击打开
这是最容易被忽略的实操陷阱。右键 HTML 文件 → “Open with Live Server”,而不是双击文件图标。后者走的是 file:// 协议,所有 fetch、EventSource、localStorage 在现代浏览器中都会受限或失效。Live Server 默认启动在 http://localhost:5500,和你的 server.js(监听 3000)端口不冲突,但要注意跨域:如果前端页面和 SSE 接口不在同一端口,需在 Express 中加 res.setHeader('Access-Control-Allow-Origin', '*')(仅开发用)。
SSE 的边界很清晰:它适合推送文本状态、指标、通知,不适合视频帧或音频包。真要做直播推流,立刻转向 flv.js + node-media-server 或 WebRTC 方案,别在 SSE 上硬扛二进制流。



















