服务器向浏览器推送信息，除了 WebSocket，还有一种方法：Server-Sent Events（以下简称 SSE）。
SSE（Server-Sent Events）是一种用于实现服务器主动向客户端推送数据的技术，也被称为“事件流”（Event Stream）。它基于 HTTP 协议，利用了其长连接特性，在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送。
hml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSE Client</title>
</head>
<body>
<h1>Server-Sent Events Demo</h1>
<button id="stop" onclick='stopEvents()'>停止</button>
<div id="result"></div>
<script>
let evtSource=null
function start(){
if (!!window.EventSource) {
evtSource = new EventSource('http://192.168.1.22:8080/events');
evtSource.onmessage = function(e) {
document.getElementById('result').innerHTML = e.data + '<br>' + document.getElementById('result').innerHTML;
};
evtSource.onerror = function(e) {
console.error('EventSource failed:', e);
evtSource.close();
};
} else {
console.log("Your browser doesn't support Server-Sent Events");
}
}
function stopEvents() {
if (evtSource) {
evtSource.close(); // 调用 close 方法停止接收事件
evtSource = null; // 可选：将 evtSource 设置为 null，以表明连接已关闭
}
}
start()
</script>
</body>
</html>
服务器端代码，用的node:
const http = require('http');
const server = http.createServer((req, res) => {
if (req.url === '/events') {
// 设置内容类型为 text/event-stream
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Headers':'Origin, X-Requested-With, Content-Type, Accept',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 每隔一定时间向客户端发送消息
const interval = setInterval(() => {
const message = `data: ${new Date().toLocaleTimeString()}\n\n`;
res.write(message);
}, 1000);
// 监听客户端关闭连接，停止发送数据
req.on('close', () => {
clearInterval(interval);
res.end();
});
} else {
res.writeHead(404);
res.end('Not Found');
}
});
server.listen(8080, () => {
console.log('SSE server is running on http://localhost:8080');
});
