没问题！我直接给你**可直接复制运行、最精简、能跑通**的两套完整代码：
SSE + WebSocket 全套前后端示例（前端原生JS + 后端Node.js最简版）。
你复制下来就能本地运行，直接对比两者的区别。
一、SSE 完整可运行代码（单向推送）
前端代码（index.html）
<!DOCTYPE html>
<html>
<body>
<h1>SSE 实时消息</h1>
<div id="msg"></div>
<script>
// 1. 连接 SSE
const sse = new EventSource('/sse');
const msgBox = document.getElementById('msg');
// 2. 接收服务端消息
sse.onmessage = (e) => {
msgBox.innerHTML += `<p>${e.data}</p>`;
};
// 3. 错误（会自动重连）
sse.onerror = (err) => {
console.log('SSE 断开，正在自动重连...');
};
</script>
</body>
</html>
后端代码（server.js，Node.js）
const express = require('express');
const app = express();
// 托管前端页面
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// SSE 接口
app.get('/sse', (req, res) => {
// SSE 响应头
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.setHeader('Access-Control-Allow-Origin', '*');
// 每 2 秒推一条消息
const timer = setInterval(() => {
const time = new Date().toLocaleTimeString();
res.write(`data: SSE 推送消息：${time}\n\n`);
}, 2000);
// 断开连接清理
req.on('close', () => {
clearInterval(timer);
});
});
app.listen(3000, () => {
console.log('SSE 服务运行在 http://localhost:3000');
});
运行方法
- 新建文件夹，放两个文件
-
执行：
npm init -y npm install express node server.js - 打开浏览器：
http://localhost:3000
二、WebSocket 完整可运行代码（双向通信）
前端代码（ws.html）
<!DOCTYPE html>
<html>
<body>
<h1>WebSocket 双向通信</h1>
<input id="input" placeholder="输入消息发送给服务端">
<button onclick="send()">发送</button>
<div id="msg"></div>
<script>
const msgBox = document.getElementById('msg');
// 1. 连接 WebSocket
const ws = new WebSocket('ws://localhost:3000');
// 连接成功
ws.onopen = () => {
console.log('WebSocket 连接成功');
};
// 接收服务端消息
ws.onmessage = (e) => {
msgBox.innerHTML += `<p>服务端：${e.data}</p>`;
};
// 发送消息给服务端
function send() {
const input = document.getElementById('input');
const text = input.value;
ws.send(text);
msgBox.innerHTML += `<p>我：${text}</p>`;
input.value = '';
}
// 断开（需手动重连）
ws.onclose = () => {
console.log('WebSocket 断开，需手动重连');
};
</script>
</body>
</html>
后端代码（ws-server.js）
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const app = express();
const server = http.createServer(app);
// 启动 WebSocket
const wss = new WebSocket.Server({ server });
app.get('/', (req, res) => {
res.sendFile(__dirname + '/ws.html');
});
// 监听 WebSocket 连接
wss.on('connection', (ws) => {
console.log('客户端已连接');
// 接收客户端消息
ws.on('message', (msg) => {
console.log('收到客户端：', msg.toString());
// 服务端回复消息
ws.send(`服务端已收到：${msg.toString()}`);
});
// 每 3 秒主动推送
const timer = setInterval(() => {
ws.send(`主动推送：${new Date().toLocaleTimeString()}`);
}, 3000);
ws.on('close', () => {
clearInterval(timer);
console.log('客户端断开');
});
});
server.listen(3000, () => {
console.log('WebSocket 服务运行在 http://localhost:3000');
});
运行方法
npm install ws
node ws-server.js
打开：http://localhost:3000
三、两者运行效果对比
SSE
- 只能**服务端 → 客户端**
- 自动重连，不用管
- 代码极少
- 适合：通知、日志、行情、状态更新
WebSocket
- 客户端 ↔ 服务端 双向发消息
- 可发文件/二进制
- 断开需要**自己写重连**
- 适合：聊天、游戏、互动、协作
四、最快选型口诀
- 只推不收 = SSE
- 又推又收 = WebSocket
总结
- 两套代码都**可直接运行**，无坑
- SSE：基于HTTP、单向、自动重连、超简单
- WebSocket：独立协议、双向通信、功能更强