什么是 SSE
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它允许服务器实时向客户端推送数据，而无需客户端发起请求。SSE 的工作原理是，客户端通过 HTTP 连接服务器，服务器保持连接打开，并定期发送事件数据给客户端。客户端可以通过 JavaScript 监听这些事件，并对它们做出响应。
SSE 的事件模型
SSE 的事件模型由三个部分组成：事件流、事件类型和数据。
事件流
事件流是 SSE 的核心概念，它是由服务器向客户端发送的一系列事件。每个事件都是一个文本消息，由一个或多个字段组成，字段之间使用换行符分隔。事件流的格式如下：
event: <事件类型> data: <事件数据> event: <事件类型> data: <事件数据> ...
事件类型
事件类型是一个可选的字段，用于标识事件的类型。如果不指定事件类型，则默认为“message”。事件类型的格式如下：
event: <事件类型>
数据
数据是事件的主体内容，可以是任意文本格式。数据的格式如下：
data: <事件数据>
使用 SSE
使用 SSE 需要在服务器端和客户端都做出相应的修改。
服务器端
在服务器端，需要创建一个 SSE 连接，并定期向客户端发送事件。下面是一个 Node.js 的示例：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
const data = new Date().toLocaleTimeString();
res.write(`event: clock\ndata: ${data}\n\n`);
}, 1000);
}).listen(3000);这个示例创建了一个 HTTP 服务器，每秒钟向客户端发送一个事件，事件类型为“clock”，事件数据为当前时间。
客户端
在客户端，需要使用 JavaScript 监听事件流，并处理事件。下面是一个简单的示例：
const source = new EventSource('/events');
source.addEventListener('clock', (event) => {
console.log(event.data);
});这个示例创建了一个 EventSource 对象，连接到服务器的“/events”路径。当服务器发送一个事件类型为“clock”的事件时，它会在控制台上输出事件数据。
总结
SSE 是一种非常有用的服务器推送技术，可以用于实时更新网页内容、发送通知等场景。深入理解 SSE 的事件模型，可以帮助我们更好地使用这个技术，并在实际开发中发挥它的优势。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583fd6dd2f5e1655dec825f