在 Web 应用程序中，Server-Sent Events（SSE）是一种实现服务器到客户端单向通信的技术。这种技术允许服务器向客户端推送事件，而无需客户端发起请求。它基于 HTTP 协议，使用了长连接，与 WebSocket 相似，但 SSE 没有双向通信的能力。
SSE 原理
SSE 的工作原理是，客户端通过 HTTP 协议向服务器发送一个普通的 GET 请求，服务器在响应中返回一个头部字段 Content-Type: text/event-stream，并保持连接打开状态。之后，服务器将定期发送一些数据到客户端，这些数据被称为事件（event）。每个事件包含一个事件标识符（event ID）、一个可选的事件名称（event type）和事件数据（event data）。客户端通过监听 message 事件来接收事件数据。
SSE 示例
以下是一个简单的 SSE 示例，它将一个计数器的值发送到客户端：
服务器端代码
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
let counter = 0;
setInterval(() => {
counter++;
res.write(`event: counter\ndata: ${counter}\n\n`);
}, 1000);
});
server.listen(3000);客户端代码
const source = new EventSource('http://localhost:3000');
source.addEventListener('counter', event => {
console.log('Counter:', event.data);
});在上述代码中，服务器每隔一秒钟发送一个 counter 事件到客户端，事件数据为当前计数器的值。客户端通过监听 counter 事件来接收事件数据，并将其打印到控制台上。
SSE 的优势
SSE 具有以下优势：
- 简单易用：相比 WebSocket，SSE 更加简单易用，不需要复杂的握手过程，只需要一个普通的 HTTP 请求即可。
- 兼容性好：SSE 基于 HTTP 协议，可以在所有现代浏览器中使用，而且不需要特殊的协议支持。
- 可靠稳定：SSE 基于长连接，可以保持连接打开状态，服务器可以在任何时候向客户端推送事件，而不用担心网络连接中断的问题。
SSE 的应用场景
SSE 可以在以下场景中使用：
- 实时通知：SSE 可以用于实时通知用户某个事件的发生，比如新的消息、新的评论等。
- 实时数据更新：SSE 可以用于实时更新数据，比如股票行情、天气预报等。
- 实时日志：SSE 可以用于实时查看日志信息，比如服务器日志、应用程序日志等。
总结
Server-Sent Events 是一种实现服务器到客户端单向通信的技术，它基于 HTTP 协议，使用了长连接。SSE 具有简单易用、兼容性好、可靠稳定等优势，可以应用于实时通知、实时数据更新、实时日志等场景。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65630e48d2f5e1655dcc2abc