前言
在 Web 开发中，实时数据展示是一个常见的需求，比如在线聊天、实时监控等场景。传统的实现方式是使用轮询或长轮询，但这些方式都存在一些问题，比如频繁的请求会增加服务器压力，同时也会影响客户端的性能和用户体验。
而 Server-Sent Events（简称 SSE）就是一种新的实时数据传输方式，能够实现服务器端向客户端推送数据，不需要客户端频繁地向服务器发送请求。本文将介绍如何在 React 中使用 SSE 实现实时数据展示。
SSE 简介
SSE 是一种基于 HTTP 的协议，它允许服务器向客户端推送数据，而不需要客户端发起请求。SSE 使用了一个长连接，通过这个连接来传输数据。当服务器有数据需要推送时，就会将数据发送给客户端，客户端接收到数据后就可以进行相应的操作。
SSE 的好处在于，它能够实现实时数据传输，而不需要客户端频繁地向服务器发送请求。同时 SSE 也支持自定义事件，可以根据不同的事件类型来传输不同的数据。
在 React 中使用 SSE
在 React 中使用 SSE 实现实时数据展示，可以分为以下几个步骤：
- 创建一个 SSE 连接
- 监听 SSE 事件
- 处理接收到的数据
- 关闭 SSE 连接
创建 SSE 连接
在 React 中，可以使用 EventSource 对象来创建 SSE 连接。EventSource 对象是浏览器原生提供的，用于接收服务器端推送的事件。
const eventSource = new EventSource('/api/sse');上面的代码创建了一个 SSE 连接，并指定了服务器端的地址。当连接建立成功后，服务器端就可以向客户端推送数据了。
监听 SSE 事件
在 SSE 连接建立后，需要监听服务器端发送的事件。可以使用 EventSource 对象的 onmessage 方法来监听服务器端发送的消息。
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
// 处理接收到的数据
};上面的代码定义了一个 onmessage 回调函数，在服务器端发送消息时会自动触发该函数。在函数中，可以获取到服务器端发送的数据，并进行相应的处理。
处理接收到的数据
接收到服务器端发送的数据后，需要进行相应的处理。可以将数据保存到组件的状态中，然后在组件中渲染出来。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
--
-
------------------- -
----- ----------- - --- ------------------------
--------------------- - ------- -- -
----- ---- - -----------------------
---------------
----- -------------------- ------
---
--
-
-------- -
------ -
-----
--------------------------- -- -
---- ----------------------------------
---
------
--
-
-上面的代码定义了一个 App 组件，在 componentDidMount 生命周期中创建了 SSE 连接，并监听服务器端发送的消息。当接收到消息时，将消息保存到组件的状态中，并在组件中渲染出来。
关闭 SSE 连接
在 SSE 连接不再需要时，需要手动关闭连接，释放资源。
eventSource.close();
示例代码
下面是一个完整的示例代码，演示了如何在 React 中使用 SSE 实现实时数据展示。
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
----- ---
--
-
------------------- -
----- ----------- - --- ------------------------
--------------------- - ------- -- -
----- ---- - -----------------------
---------------
----- -------------------- ------
---
--
-
---------------------- -
--------------------
-
-------- -
------ -
-----
--------------------------- -- -
---- ----------------------------------
---
------
--
-
-
------ ------- ----总结
本文介绍了如何在 React 中使用 SSE 实现实时数据展示。SSE 是一种新的实时数据传输方式，能够实现服务器端向客户端推送数据，不需要客户端频繁地向服务器发送请求。使用 SSE 可以提高应用的性能和用户体验，是一种非常实用的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650d281a95b1f8cacd6e04b2