随着 Web 技术的不断发展，实时数据展示已成为现代 Web 应用程序的重要组成部分。在 React 中使用 SSE（Server-Sent Events，服务器发送事件）实现实时数据展示是一种简单有效的方法。
本文将介绍如何在 React 中使用 SSE 实现实时数据展示，旨在帮助前端开发者学习和掌握这一技术，并提供示例代码和指导意义。
什么是 SSE
SSE 是一种基于 HTTP 协议的服务器推送技术，它通过浏览器与服务器之间的单向连接，让服务器向客户端实时推送数据。相比于 WebSocket，SSE 更加简单易用，并且不需要客户端发送任何请求。
SSE 的优点：
简单易用：SSE 基于 HTTP，客户端无需额外安装任何插件或使用特定的协议，只需要使用 JavaScript 就可以实现实时数据传输。
单向连接：SSE 客户端与服务器之间的连接是单向的，只能由服务器向客户端推送数据，这保证了数据的安全性和不可篡改性。
容错性高：SSE 的连接不会因为网络中断等问题而断开，服务器将会一直等待新消息的到来，连接可以保持很长时间，从而保证了数据的可靠性和实时性。
在 React 中使用 SSE 实现实时数据展示的过程可以分为以下几个步骤：
- 创建 EventSource 对象
在 React 组件中，可以通过创建 EventSource 对象来与服务器建立 SSE 连接。EventSource 对象有一个参数，就是 SSE 服务器的 URL。
const source = new EventSource(url);
- 监听 SSE 事件
EventSource 对象可以监听服务器发送的事件，当服务器发送事件时，客户端就会触发对应的事件回调函数。在 React 中使用 useEffect 钩子函数来监听事件是最好的选择，因为 useEffect 可以保证只有一个源 useEffect 函数被触发。
useEffect(() => {
source.onmessage = (event) => {
const data = JSON.parse(event.data);
// 在这里处理推送过来的数据
};
}, [source]);- 处理推送过来的数据
在 SSE 连接建立成功后，服务器会发送一系列数据到客户端。在我们的 React 组件中，我们需要把推送过来的数据展示出来。通常，推送过来的数据是一个 JSON 字符串，需要使用 JSON.parse() 方法将其转换为 JavaScript 对象。
useEffect(() => {
source.onmessage = (event) => {
const data = JSON.parse(event.data);
// 使用推送过来的数据更新 React 组件状态
setData(data);
};
}, [source, setData]);- 在组件中展示实时数据
在上一步中，我们已经将推送过来的数据保存在 React 组件状态中了，现在我们需要在组件中展示它。这个过程与普通的 React 数据展示没有太大区别，只需要在组件中使用状态即可。
return (
<div>
{data.map((item) => (
<p key={item.id}>{item.message}</p>
))}
</div>
);- 关闭 SSE 连接
在组件销毁时，需要关闭 SSE 连接，避免浪费资源。使用 useEffect 钩子函数可以在组件卸载时关闭连接。
useEffect(() => {
return () => {
source.close();
};
}, [source]);示例代码
下面是一个简单的实时数据展示示例，它使用 Node.js 作为 SSE 服务器，并使用 React 和 TypeScript 编写前端代码。在这个示例中，SSE 服务器每秒钟向客户端推送一条数据，客户端收到数据后将其展示在界面上。
1. 安装依赖
# 安装后端依赖 npm install express cors # 安装前端依赖 npm install react react-dom @types/react @types/react-dom
2. 编写后端代码
创建一个文件名为 "server.js" 的文件，将下面的代码复制到文件中。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
--- -- - --
--- -------- - -
- --- ----- -------- ------ ------ --
- --- ----- -------- ---- --- ----- --
--
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
----------- -------------
---
----- ---------- - -------------- -- -
----- ---- - -
--- -----
-------- -------- - - ---
--
--------------------
---------------- ------------------------------
-- ------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- -
---------------- ------ ------- -- ------------------------
---3. 编写前端代码
创建一个名为 "index.tsx" 的文件，将下面的代码复制到文件中。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
----- --- - ---------------------------------
--------- ------- -
--- -------
-------- -------
-
-------- ----- -
----- ------ -------- - ------------------------
------------ -- -
----- ------ - --- -----------------
---------------- - ------- -- -
----- ---- - -----------------------
----------- -- ------ -------
--
------ -- -- -
---------------
--
-- ----
------ -
-----
---------------- -- -
-- --------------------------------
---
------
--
-
------ ------- ----4. 运行应用程序
在终端中执行以下命令，启动 SSE 服务器：
node server.js
在另一个终端窗口中执行以下命令，启动 React 应用程序：
npm start
现在你应该能够在浏览器中看到一个简单的页面，它每秒钟会展示一条新消息。
结论
本文介绍了如何在 React 中使用 SSE 实现实时数据展示，向读者展示了 SSE 技术的原理、优点和在实际应用中的使用方法。希望读者可以通过这篇文章学习并掌握 SSE 技术，从而开发出更加优秀的 Web 应用程序。
以上代码已经上传至 GitHub，欢迎下载和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4061ef40ec5a964e6d724