Server-sent Events(SSE) 是一种用于在客户端和服务器之间进行单向实时通信的技术。与传统的轮询、 Websockets 等技术相比，SSE 更加轻量级、容易实现，适用于一些不需要双向通信的场景。
SSE 基本原理
SSE 基于 HTTP 协议，通过不断发送 HTTP 响应给客户端，从而实现服务器向客户端的主动推送数据。在客户端，使用 EventSource 接口进行监听，一旦有数据推送到来，就会触发 onmessage 事件，从而实现实时更新数据。
SSE 实现步骤
1. 服务器端
服务器端需要根据 SSE 的标准格式发送响应，格式如下：
event: <event_name> data: <data_content> id: <event_id> retry: <time_interval> \n
其中，event 指定事件名称（可选），data 指定数据体内容，id 指定事件标识符（可选），retry 指定重连时间（可选），\n 表示结束符。
对于一个 SSE 通讯，服务器端至少需要发送一个数据块。下面是一个简单的 Node.js 示例：
const http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
res.write('data: ' + new Date().toISOString() + '\n\n');
}, 1000);
}).listen(8000);2. 客户端
客户端需要使用 EventSource 接口进行监听，通过 onmessage 事件接收服务器推送过来的数据。下面是一个简单的 HTML 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SSE Demo</title>
</head>
<body>
<h1>SSE Demo</h1>
<div id="output"></div>
<script>
const eventSource = new EventSource('/sse');
eventSource.onmessage = function(event) {
document.getElementById('output').innerHTML = event.data;
};
</script>
</body>
</html>SSE 特点和优缺点
特点
- SSE 基于 HTTP 协议，因此无需额外安装插件，支持性好；
- SSE 协议本身轻量级，不需要建立连接等额外工作，节省网络开销；
- SSE 协议支持断线重连，可保证通讯的稳定性；
- SSE 本身是单向通讯，因此不会产生网络拥塞等问题。
优缺点
- 优点：SSE 部署和使用较为简单，适合一些较为简单的实时通讯场景。
- 缺点：SSE 只支持单向通讯，因此无法支持一些需要双向通讯的场景。
总结
SSE 是一种简单、轻量、稳定、易于使用的实时通讯技术，适用于一些不需要双向通讯的场景。在实际开发中，可以根据具体需求选择不同的通讯技术，以便实现更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65962ab3eb4cecbf2da0b50a