基于 Server-sent Events 的消息推送与实时数据更新
在 Web 应用程序中，实时数据更新和消息推送对于提高用户体验和应用程序的可用性至关重要。在传统的 Web 应用程序中，实现实时更新和消息推送往往需要使用 WebSocket 或轮询技术。然而，这些技术涉及到复杂的协议和高峰值负载的处理，因此实现起来可能非常困难。
Server-sent Events (SSE) 是一种简单的技术，可以使开发人员轻松实现实时数据更新和消息推送。SSE 基于 HTTP 协议，可以使用标准 AJAX 技术来处理。同时，SSE 可以轻松处理高负载场景，避免了传统的轮询和 WebSocket 技术的复杂性问题。
本文将介绍如何使用 SSE 实现消息推送和实时数据更新，以及如何在前端中使用 SSE，并提供相关代码示例，帮助读者快速上手并开始实现 SSE。
- SSE 基础
SSE 是一种 HTML5 技术，它使用类似流的机制，通过一个持久的 HTTP 连接从服务器接收推送数据。这种机制使服务器可以实时更新客户端，而无需客户端发起请求。SSE 可以通过浏览器对象的 EventSource 类来实现。具体来说，SSE 由以下几个部分组成：
1.1. 服务器端代码
服务器端代码需要处理浏览器的 SSE 连接请求。在基于 Node.js 的服务器中，您可以使用以下代码来处理 SSE 连接请求：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- -- - ---- -----------------------------
-------------------- -- -
----- ----------- - ---- -----------------------------
-------------- - - -- - ------
----------------- ---------
---------------- ------ ---- - ---- -- - - ----------- - --------
-- ------
----------------在上面的代码中，我们使用 Node.js 创建一个 HTTP 服务器。当客户端连接到该服务器并请求 SSE 时，服务器会向客户端发送一个事件流。在这个例子中，我们使用 setInterval 函数每秒钟向客户端发送一个 ping 事件，其中包含一个带时间戳的消息。
1.2. 客户端代码
客户端代码可以使用浏览器中的 EventSource 类来连接到 SSE 服务器。以下是一个简单的示例：
const source = new EventSource('http://localhost:9000');
source.onmessage = function (event) {
console.log(event.data);
};在上面的代码中，我们使用浏览器中的 EventSource 类连接到 SSE 服务器。每当服务器发送一个消息时，就会调用 onmessage 回调函数，并将消息作为参数传递。在这个例子中，我们仅仅在控制台中打印了消息。
- SSE 消息推送
SSE 的服务器端代码可以使用类似前面的示例来实现 Web 应用程序中的消息推送。在本节中，我们将使用 SSE 实现一个简单的聊天程序。以下是一个示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ---- - ----------------
----- ---- - ----------------
----- ------- - ---
-------------------------- ----- ---- -
----- -------- - ------- --- --- - --------------------- - ---------- - --------
----- ----------- - --------------------------------------
-- ---------------------------- --- -- -
----- ------- - ---------------------------- ----
------------------------ -- -
----------------------- -----------------
---
------------------ -
--------------- ------------
---
--------------
-------
-
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
----- ------ - -
--- ---- -----------------------------
---
--
---------------------
--------------- -- -- -
----------------------- ------ --- ------ ---------------
--------------------------------------- ---
---
-------
-
--------------------- -------- ----- -------- -
-- ----- -
-------------------
----------
- ---- -
------------------ -
--------------- -----------
---
---------------- ---------
-
---
----------------在上面的代码中，我们创建了一个 HTTP 服务器，并为浏览器提供了一个简单的聊天应用程序功能。当浏览器连接到 /events 路径时，服务器会返回一个 SSE 流。当浏览器向 /message<消息> 发送 GET 请求时，服务器将在其中的所有客户端之间广播该消息。
以下是客户端代码的示例：
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ---------------- - -------- ------- - ----- --- - ------------------------------ ------------- - ----------- ------------------------------- -- ----- ---- - --------------------------------------- ------------------------------- -------- ------- - ----------------------- ----- ----- - ---------------------------------------- ----- ------- - ------------ ----------------------------- ----------- - --- ---
在上面的代码中，我们使用 EventSource 类来连接到 SSE 服务器。每当服务器发送一个消息时，就会创建一个新的 div 元素，并将消息添加到元素中。我们还使用 fetch() 函数将新的聊天消息发送到服务器。
- SSE 实时数据更新
SSE 可以轻松实现基于 AJAX 的实时数据更新。在本节中，我们将使用 SSE 在前端页面中实时更新数据。以下是一个简单的示例：
const source = new EventSource('/data');
source.onmessage = function (event) {
const div = document.getElementById('realtimeData');
div.innerHTML = JSON.stringify(JSON.parse(event.data), null, 2);
};在上面的代码中，我们使用 EventSource 类连接到 SSE 服务器，以获取实时数据。每当服务器发送一个新的消息时，我们都会将其解析为实时数据，并将其表示为格式化的 JSON 数据。
在最后，我们需要实现 SSE 服务器端，以下是一个示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------------- -- -
----- ----------- - ---- -----------------------------
----- ---- - -
----- ------------
------ ------------------------ - ----
--
---------------- ------------------------------
-- ------
----------------在上面的代码中，我们创建了一个 HTTP 服务器并使用 setInterval 函数每秒钟生成一个新的消息，并将其作为 JSON 数据发送到浏览器。
结论
在本文中，我们介绍了如何使用 SSE 实现实时数据更新和消息推送。SSE 是一种简单易用的技术，并提供了一种轻松处理高负载场景的方法。通过本教程中的示例代码，我们的读者可以轻松掌握 SSE 的使用方法，并在 Web 应用开发中应用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67515dc38bd460d3ad88fd3a