随着 Web 应用程序变得越来越复杂，许多网站需要能够及时向客户端推送数据，以便进行实时反馈和更新。当涉及到需要实时显示变化的用户界面时，这变得尤为重要。
Server-Sent Events（SSE）是一种基于 HTTP 的协议，用于在客户端和服务器之间传输实时数据。使用 SSE，服务器可以向客户端发送数据，而无需客户端发起请求。服务器可以在需要时推送任意数量的数据，这使得 SSE 推送数据的效率远高于轮询技术。
在本文中，我们将探讨如何使用 SSE 实现实时数据推送并创建出色的用户体验。我们还将提供示例代码来帮助您更好地了解如何使用 SSE。
什么是 Server-Sent Events？
SSE 是一种允许服务器向客户端推送事件流的技术。SSE 使用基本的 HTTP 连接来传输消息，且包括三个主要组件：
- 客户端：通常是一个浏览器窗口。
- 服务器：管理和传输数据。
- 事件流：表示服务器向客户端发送的数据序列。
事件流是 SSE 的核心组件。服务器通过一个特殊的 MIME 类型 "text/event-stream" 来发送事件流，以便让客户端知道从服务器接收到的数据是事件流数据。
SSE 的优点
相对于其他实时数据传输技术，SSE 具有以下优点：
- 服务器可以在客户端发出请求之前即推送数据。
- 服务器可以不间断地向客户端发送数据，也可以只发送一次。
- SSE 建立在 HTTP 协议上，因此不需要新的协议或端口。
- SSE 具有逐步退化的能力，因此即使浏览器不支持 SSE，它仍然可以用 AJAX 轮询来处理数据。
如何使用 SSE？
SSE 的实现需要后端和前端两个方面。在这里，我们将介绍如何在服务器端和客户端分别实现它。
服务器端实现 SSE
在服务器端，我们需要按以下步骤来实现 SSE：
- 创建一个 HTTP 请求，并将其设置为 "text/event-stream" MIME 类型。
// 创建出 SSE 连接
res.writeHead(200, {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
"Connection": "keep-alive"
})- 向客户端发送数据。每一个数据块必须以 "data:" 开头，以 "\n\n"（两个换行符）结尾。例如，以下代码为 SSE 推送了一个字符串。
// SSE 推送数据
res.write("data: \"" + message + "\"\n\n");- 如果需要，可以在数据块中添加事件类型。以下代码在 SSE 中添加了一个事件类型。
res.write("event: eventName\n");
res.write("data: \"" + message + "\"\n\n");- 当不需要 SSE 时，关闭连接。
res.end();
以下是一个简单的 Node.js 服务器端的 SSE 示例。在该例子中，服务器每隔 1 秒向客户端推送一个数字。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -- - -------------- -- -
----- ------- - ------------------------ - -----
---------------- - - ------- - --------
-- ------
--------------- -- -- -
------------------
----------
---
---
------------------- -- -- -
------------------- ------- -- ---- -------
---客户端实现 SSE
在客户端，我们需要按以下步骤来实现 SSE：
- 创建一个新的 EventSource 实例，然后指定 SSE 服务器的 URL。
const eventSource = new EventSource("/sse");- 监听事件流的 open、message、和 error 事件。
-- -------------------- ---- ------- ------------------ - ------- -- - ---------------- ---------- --------- ------- -- --------------------- - ------- -- - --------------------- --- ---------- ------------ -- ------------------- - ------- -- - ------------------ ---------- -------- ------- -------------------- --
- 如果需要，可以使用 SSE 中添加的事件类型来监听不同的事件类型。
eventSource.addEventListener("eventName", (event) => {
console.log("Received SSE event: ", event.data);
});- 当不需要 SSE 时，关闭连接。
eventSource.close();
以下是一个简单的前端 SSE 示例。在该例子中，客户端将收到服务器每隔 1 秒推送的数字，并将其显示在控制台中。
-- -------------------- ---- ------- ----- ----------- - --- -------------------- ------------------ - ------- -- - ---------------- ---------- --------- ------- -- --------------------- - ------- -- - --------------------- --- ---------- ------------ -- ------------------- - ------- -- - ------------------ ---------- -------- ------- -------------------- --
总结
SSE 是一种用于实现实时数据传输的技术，它可以让服务器向客户端推送数据，从而实现实时反馈和更新。本文介绍了 SSE 的优点，并提供了服务器端和客户端的示例代码，以帮助您更好地了解如何使用 SSE 实现实时数据推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469e4eb968c7c53b09ad1e9