随着 Web 应用程序的日益普及，前端 向服务器请求实时数据的需求也越来越多。传统的轮询和 WebSocket 方案都存在着一定的缺陷，而 Server-sent Events（SSE）则能够更好地解决这些问题。本文将介绍 React 和 SSE 的集成实践，探究如何利用 SSE 构建实时数据交互。
什么是 Server-sent Events
SSE 是一种 Web 技术，它允许服务器通过 HTTP 协议向客户端推送数据。相比于轮询和 WebSocket，SSE 更加轻量级，不需要复杂的协议和握手流程，也更加容易部署和维护。
SSE 的一个重要特点是单向通信，即服务器只能向客户端推送数据，而不能接收来自客户端的请求。因此，SSE 通常被用于从服务器获取实时数据，如股票行情、新闻更新、社交网络动态等等。
React 中使用 Server-sent Events
React 是一个声明式的、高效的前端框架，它提供了一种快速构建 SPA（单页应用）的方式。我们可以使用 React 来渲染 SSE 推送的数据，实现实时更新的效果。
在 React 中使用 SSE 需要经过以下步骤：
1. 建立 SSE 连接
首先，我们需要在 React 中建立与服务器的 SSE 连接。可以通过 EventSource 类来实现：
const source = new EventSource('http://localhost:3000/stream');这里传入的参数是 SSE 的 URL，其中 /stream 是我们部署 SSE 服务时设置的端点。
2. 处理 SSE 推送
SSE 服务会不断向客户端推送数据，我们需要在 React 中处理这些推送并渲染到界面上。可以使用 onmessage 事件来监听 SSE 的推送：
source.onmessage = function(event) {
const data = JSON.parse(event.data);
// 在 React 中渲染数据
}这里的 data 是 SSE 推送的 JSON 数据，我们可以将其解析并交给 React 进行渲染。
3. 处理 SSE 断开
由于 SSE 是基于 HTTP 的，因此它可能会因为网络问题、服务器宕机等原因断开。我们需要在 React 中处理这种情况，并在断开时自动重连。
-- -------------------- ---- -------
-------------- - ---------- -
------------- -- -
----------
-- ------
--
-------- --------- -
----- ------ - --- --------------------------------------------
---------------- - --------------- -
----- ---- - -----------------------
-- - ----- -----
--
-------------- - ---------- -
---------------
--
-这段代码中，当 SSE 连接断开后，我们先等待一段时间，然后再次调用 connect 来重新建立连接。同时，设置 onerror 事件，确保在连接出现错误时自动关闭连接。
示例代码
下面是一个基于 React 和 SSE 的实时数据更新示例（用于显示当前时间戳）。在服务器端，我们使用 Node.js 来建立 SSE 服务：
-- -------------------- ---- -------
----- ---- - ----------------
------------------------------- ---- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- ------------------ ----- ---------- ----------
-- ------
----------------在客户端，我们使用 React 来渲染数据：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------ -
----- ------ -------- - ------------
------------ -- -
----- ------ - --- -------------------------------------
---------------- - ------- -- -
----- ---- - -----------------------
-------------------
--
-------------- - -- -- -
---------------
--
------ -- -- -
---------------
--
-- ----
------ -
-----
----------- ----------
------- ------------------------------------
------
--
-
------ ------- -----在 useEffect 中，我们建立 SSE 连接，并处理 SSE 推送和断开事件。useState 用来存储当前时间戳，每秒钟更新一次并在界面上进行实时渲染。
总结
在本文中，我们介绍了 React 和 SSE 的集成实践，探究如何利用 SSE 构建实时数据交互。与传统的轮询和 WebSocket 方案相比，SSE 更加轻量级和易于部署，为实时数据交互提供了一种新的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d0fa648841e9894b5b590