什么是 Server-sent Events？
Server-sent Events（SSE）是一种 HTML5 技术，允许服务器向客户端发送事件流。使用 SSE，服务器可以向客户端发送任意数量的数据，而无需客户端请求。这种技术特别适合实时应用程序，例如聊天应用程序或股票市场应用程序。
SSE 是与 WebSocket 相似的技术，但有一些重要的区别。WebSocket 提供了双向通信，而 SSE 只提供单向通信。此外，WebSocket 可以发送任何类型的数据，而 SSE 只能发送文本数据。
如何使用 Server-sent Events？
使用 SSE 非常简单，只需创建一个事件流并将其连接到服务器即可。以下是一个基本的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ------ --------------- ------- ------ ---------------- ------ ------------ ----- ------------------ --------- ----- ------ - --- ----------------------- ------------------ - --------------- - ---------------------------------------------- -- ---------- - ------- ---- ---------- ------- -------
在这个示例中，我们创建了一个事件流，并将其连接到名为 "/events" 的服务器端点。每当服务器发送一个事件时，我们将在页面上显示接收到的数据。
下面是一个简单的 Node.js 服务器，它将发送事件流：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ---- -- - ------------------- - ----------------- -------------------- ------------------ ----------- --------------- ------------ ---- --------------- -- - ------- ---- - --- ---------------------------- ------------------ -------------- --- ------ --- --------------------
在这个示例中，我们创建了一个 HTTP 服务器，并在 /events 端点上设置了 SSE 标头。然后，我们每秒发送一个事件，其中包含当前的时间。
高级用法
SSE 还有一些高级用法，可以更好地控制事件流的行为。以下是一些示例：
重试
如果服务器在发送事件时遇到错误，它可以发送一个 retry 字段，指示客户端应该在多长时间后重试连接。例如：
const data = new Date().toLocaleTimeString();
res.write(`retry: 5000\ndata: ${data}\n\n`);在这个示例中，我们设置了一个 5 秒的重试时间，如果服务器在发送事件时遇到错误，则客户端将在 5 秒后重新连接。
ID 字段
如果服务器发送的事件具有唯一的 ID，它可以包含一个 id 字段，以便客户端可以跟踪事件。例如：
const data = new Date().toLocaleTimeString();
res.write(`id: 123\ndata: ${data}\n\n`);在这个示例中，我们设置了一个 ID 为 123 的事件，以便客户端可以在接收到其他事件时识别它。
事件类型
如果服务器发送的事件具有特定的类型，它可以包含一个 event 字段，以便客户端可以根据类型处理事件。例如：
const data = new Date().toLocaleTimeString();
res.write(`event: time\ndata: ${data}\n\n`);在这个示例中，我们设置了一个类型为 time 的事件，以便客户端可以根据类型处理事件。
结论
Server-sent Events 是一种非常有用的技术，可以用于实时应用程序和其他需要实时通信的应用程序。它比 WebSocket 更简单，更轻量级，并且可以用于许多不同的用例。
在本文中，我们介绍了如何使用 SSE，并提供了一些高级用法示例。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673adf3a39d6d08e88b03f65