SSE是Server-Sent Events的缩写，是一种由服务器向浏览器发送实时更新的技术。SSE允许服务器主动推送数据到客户端，而不是客户端定期向服务器请求数据。使用SSE可以实现例如实时聊天、通知、直播更新等应用场景。
SSE的主要特点
- 单向通信：SSE是服务器向客户端的单向通信，客户端不能直接通过SSE向服务器发送消息。
- 文本数据流：SSE传输的主要是文本数据（通常是JSON格式），不适合二进制数据。
- 自动重连：SSE具有自动重连机制，当连接中断时，浏览器会自动尝试重新连接。
- 事件分发：SSE支持自定义事件类型，可以在数据流中发送不同类型的事件。
实现方式
在HTML5中，使用JavaScript可以很方便地实现SSE。以下是一个简单的例子：
服务器端（例如使用Node.js）：
const http = require('http');
http.createServer((req, res) => {
if (req.headers.accept && req.headers.accept === 'text/event-stream') {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write('data: ' + new Date().toLocaleTimeString() + '\n\n');
}, 1000);
} else {
res.writeHead(404);
res.end();
}
}).listen(3000, () => {
console.log('SSE server running on port 3000');
});
客户端（HTML）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
<h1>Server-Sent Events Example</h1>
<div id="result"></div>
<script>
if (typeof(EventSource) !== "undefined") {
const source = new EventSource('此处填入服务器地址');
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
在这个例子中，服务器每秒钟向客户端发送一次当前时间，客户端收到数据后将其显示在网页上。
优缺点
优点：
- 实时性强：适合需要实时数据更新的场景。
- 简单易用：API简单，容易实现。
缺点：
- 单向通信：仅支持服务器向客户端推送数据，客户端无法直接向服务器发送消息。
- 兼容性：部分旧浏览器不支持SSE。
- 性能：对于大量客户端连接的场景，可能需要优化服务器的性能。
总之，SSE是一种轻量级、易于实现的实时数据推送技术，适用于多种实时应用场景。
