在 web 开发中，实时通信是一个很重要的需求。传统的实现方式是使用 WebSocket，但是在某些场景下，我们可能需要一种更轻量级的实现方式。这时，Server-sent Events（简称 SSE）就成为了一个不错的选择。
什么是 Server-sent Events
Server-sent Events 是一种基于 HTTP 的实时通信技术。它允许服务器向客户端推送数据，而无需客户端发起请求。SSE 的实现方式是通过一个长连接，服务器不断发送数据给客户端，客户端通过监听这个连接来接收数据。
SSE 的优点
相比于 WebSocket，SSE 有以下优点：
- SSE 是基于 HTTP 的，因此不需要特殊的协议和端口，可以直接使用标准的 HTTP 端口（80 和 443）。
- SSE 是单向通信，只有服务器向客户端推送数据，因此相对更安全。
- SSE 是轻量级的，不需要像 WebSocket 那样建立一个全双工的通信通道，因此对服务器的负载更小。
如何使用 SSE
使用 SSE 非常简单，只需要在客户端通过 JavaScript 创建一个 EventSource 对象，然后监听服务器端推送的事件即可。
// javascriptcn.com 代码示例
const source = new EventSource('/sse'); // 创建一个 EventSource 对象
source.addEventListener('message', function(event) { // 监听服务器端推送的 message 事件
console.log(event.data); // 处理服务器端推送的数据
});
source.addEventListener('error', function(event) { // 监听错误事件
console.error('SSE error', event);
});在服务器端，我们需要发送一个 Content-Type 为 text/event-stream 的响应，并且在响应体中发送一系列以 data: 开头的数据块，每个数据块之间以空行分隔。
// javascriptcn.com 代码示例
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() + '\n\n'); // 发送数据块
}, 1000);
}).listen(8080);上面的代码会每秒钟向客户端发送一个当前时间的数据块。
SSE 的注意事项
使用 SSE 时需要注意以下几点：
- SSE 的连接是单向的，只能由服务器向客户端发送数据，因此无法实现客户端向服务器发送数据的双向通信。
- SSE 的连接是长连接，因此需要注意服务器端的资源占用情况，避免连接过多导致服务器负载过高。
- SSE 的兼容性不如 WebSocket，部分浏览器可能不支持 SSE。
总结
Server-sent Events 是一种轻量级的实时通信技术，相比于 WebSocket，它更加简单、安全和轻量级。使用 SSE 可以轻松实现服务器向客户端的实时推送，但需要注意连接的资源占用情况和浏览器的兼容性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6556c5e2d2f5e1655d123a29