在现代 Web 应用程序中，实时数据的更新已经变得越来越普遍。在这个场景下，SSE（Server-Sent Events，服务器推送事件）成为了一种非常流行的技术。SSE 允许在浏览器和服务器之间建立一个持久的连接，服务器可以实时地将数据推送给浏览器。本文将介绍如何在 React 中使用 SSE 实现实时更新功能，并提供示例代码。
什么是 SSE
SSE 是一种实现服务器端推送和浏览器端接收的协议，它以 HTTP 连接为基础，并使用特定的 MIME 类型 text/event-stream。通过按照特定格式的文本流向浏览器发送信息，浏览器可以通过 EventSource API 来捕获并处理这些信息。
在服务器端，我们可以使用 Node.js 的 http 模块来创建 SSE。以下是一个简单的 Node.js SSE 服务器的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
----------------- ----------
-------------- -- -
---------------- - - --- -------------------- - --------
-- ------
--
--------------
---------------- ------ -- ------- -- ------------------------在这个示例中，我们使用 http 模块创建一个 HTTP 服务器，并为响应头设置了正确的 MIME 类型和 Cache-Control 以及 Connection 头。然后，我们在响应体中写入一个 retry 字段，该字段表示浏览器需要在与服务器连接中断后重新连接的时间间隔。接下来，我们按照特定的格式写入数据流。
在 React 中实现 SSE
在 React 中，我们可以使用 useEffect hook 来创建 SSE。我们需要首先通过 EventSource API 来创建一个 SSE。然后，我们可以在 onmessage 回调函数中获取数据，并调用 setState 函数来更新 UI。下面是一个使用 SSE 来显示服务器端时间的简单 React 组件的示例代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------- -
----- ------ -------- - ---------------
------------ -- -
----- ------ - --- -------------------------------------
---------------- - ------- -- -
--------------------
--
------ -- -- -
---------------
--
-- ----
------ -
---------- - ------- ----- - - ---- - -------------------
--
-
------ ------- ------在这个示例中，我们定义了一个名为 Clock 的 React 组件，其中 time 变量用于存储服务器端时间。在 useEffect 中，我们创建了一个新的 EventSource 对象，指定 SSE 服务器的 URL。然后，我们在 onmessage 回调函数中更新 time 状态变量，并在组件 UI 中显示它。我们还使用了一个空的数组来指定 useEffect 的依赖项，以确保该组件仅运行一次。
总结
本文介绍了如何在 React 中使用 SSE 实现实时更新功能。我们首先介绍了 SSE 的基础知识和 Node.js SSE 服务器的示例代码。然后，我们展示了如何使用 useEffect hook 和 EventSource API 在 React 中实现 SSE，并提供了一个简单的示例代码。在实际的项目中，SSE 可以用于实现实时聊天、实时通知、实时监测等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5b32ff6b2d6eab3e87c04