在现代 Web 应用中，Web 推送已经变得越来越普遍，用于实时显示事件更新、通知和其他主动内容。 以前，要实现 Web 推送，必须使用轮询或 WebSocket。这些技术有其自己的优缺点，但是它们不一定适合所有场景。 Server-Sent Events（SSE）是一种新型的 Web 推送技术，相比于其他技术，提供了简单、可靠、低延迟和低复杂度的解决方案。
什么是 Server-Sent Events？
SSE 是一种 API，用于在 Web 浏览器（客户端）和 Web 服务器之间建立单向通信通道。 它允许服务器主动推送数据给客户端。与 WebSocket 不同，SSE 不需要双向通信，因此可以使用普通的 HTTP 连接。客户端只需要使用一个简单的 JavaScript 代码片段即可订阅事件，然后服务器可以在有新数据时向客户端发送更新。
SSE 是基于“事件”机制的，这意味着服务器可以将不同类型的数据打包为不同类型的事件。这些事件可以包含任何类型的数据，例如文本、JSON、XML 等。客户端可以根据其需要处理特定类型的事件。
Server-Sent Events 的优点
- 简单易用：SSE 的 API 很简单，客户端只需一行代码即可订阅服务器发送的事件。服务器也只需要少量代码即可实现 Web 推送。
- 可靠性高：与轮询相比，SSE 是一种更可靠、更高效的解决方案。它减少了不必要的网络流量并且不需要任何轮询或长时间轮询。
- 低延迟：SSE 的延迟很低，甚至可以在几毫秒内完成数据推送。
- 低复杂度：与 WebSocket 相比，SSE 只建立单向通信通道，因此实现起来更简单。
使用 Server-Sent Events 实现 Web 推送
现在，让我们看一下如何使用 SSE 实现 Web 推送。我们将创建一个简单的聊天应用程序，允许用户通过 SSE 连接进行聊天。
首先，让我们创建一个 index.html 文件，并添加以下代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ------------ ----------- --------- ---- ---------------------- ---------- ------------------ - -------- ---- - ----------------------- -------- ------- - ------------------------------------ -------- ---------- - ------------------------------ ----------------------- - ----------------------------------- ----------------- ----------------------------------- --- ---- ---- ----------- ------------- ------- ------ - --- --------------------- --------------------------------- ------------- ---------- ------- ------ --------- -------- ----- -------------------- ------ --------------- -------- ----------- ------------- ----------------------- -------- ----------- ------------ ---------------------- --------- --------------------------- -------- --------- ---- - ---- ---- ------ ------------- ----------------------------------------------------------------- ------- -- - -------------------------- -------- -------- - ------------------------------------------ -------- ------- - ----------------------------------------- ----------------- - ----------- ------- --------- ---------------- --------- ------- --- ------------ - -------------------- ------------------ ----- ------ ------------------------------------------- - --- ----- ---------- ------- -------
现在，我们需要在服务端实现 SSE 的逻辑。 这可以使用 Node.js 和 Express 完成。我们将使用 Express 中的 EventSource 类来实现 SSE 服务。新增一个 index.js 文件，添加以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ---------------------------------- ---------------- ----- ---- -- - ---------- ----------------- -------------------- ------------------ ----------- --------------- ------------ ---- ---- -- - -- --------------- -- - ---------------- ------------ ------------------- --------- ------------------ ------------------ ------------ ------- ----------- ------ ------ ------------ --- ------ --- ---------------- -- -- - ------------------ --- -- --------- -- ---- -------- ---
这段代码做了以下几件事情：
- 首先，我们使用
app.use(express.static('public'))来指定/public目录作为静态资源目录，浏览器可以从这个目录获取 index.html 文件。 - 当客户端发送请求时，将设置必要的标头以启用 EventSource 支持。
- 然后，我们使用 setInterval 方法每隔 1 秒向客户端发送类型为“chat”的事件，包含一个用户名和一个消息。
现在，您可以在终端中运行 node index.js 并访问 http://localhost:3000 查看您的聊天应用程序。当您在输入框中输入一些文本并单击“发送”按钮时，该聊天消息将通过 SSE 推送到所有已连接的客户端。
结论
使用 Server-Sent Events 可以为您的 Web 应用程序提供高效、可靠和低延迟的 Web 推送解决方案。 SSE 的 API 简单易用，服务器端和客户端代码很容易编写。它是一种更简单、更可靠、更有效的解决方案，可用于实时显示事件更新、通知和其他主动内容的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752cb768bd460d3ad98aed1