在现代 Web 应用程序中，实时通信已经成为了必要的功能，而 Server-Sent Events（SSE）是一种实现实时通信的技术。SSE 允许服务器向客户端发送事件，而客户端可以通过监听这些事件来实现实时通信。在本文中，我们将介绍如何使用 React 实现 SSE 信息推送，并提供示例代码以供参考。
SSE 基本原理
SSE 是一种基于 HTTP 的协议，它允许服务器向客户端发送事件。SSE 的基本原理是客户端通过向服务器发送一个 HTTP 请求来建立连接，然后服务器可以通过这个连接向客户端发送事件。当客户端接收到事件时，它可以通过监听这些事件来实现实时通信。
SSE 的优点是它可以通过简单的 HTTP 请求和响应来实现实时通信，而不需要使用 WebSocket 或其他复杂的协议。此外，SSE 还支持自定义事件和重连机制，可以更好地满足实时通信的需求。
使用 React 实现 SSE 信息推送
在 React 中实现 SSE 信息推送需要使用一个名为 EventSource 的 API。EventSource API 允许我们建立 SSE 连接并监听服务器发送的事件。下面是一个简单的 React 组件，它可以建立 SSE 连接并监听服务器发送的事件：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
-------- ---------------------- -
----- --------- ----------- - -------------
------------ -- -
----- ----------- - --- --------------------
--------------------- - ------- -- -
-----------------------
--
------ -- -- -
--------------------
--
-- ----
------ -
-----
------- ------------
----------------
------
--
-
------ ------- ---------------------在上面的代码中，我们使用 useEffect 钩子来建立 SSE 连接并监听服务器发送的事件。当组件挂载时，我们创建一个 EventSource 对象并传递一个 URL，这个 URL 对应服务器的 SSE 接口。然后我们通过 onmessage 事件监听服务器发送的事件，当接收到事件时，我们将事件数据存储在组件的状态中。最后，我们在组件卸载时关闭 SSE 连接。
需要注意的是，我们可以自定义事件类型并在服务器端发送自定义事件。在客户端监听自定义事件时，我们需要通过 event.type 属性来判断事件类型，例如：
eventSource.addEventListener('myevent', (event) => {
// handle myevent
});示例代码
下面是一个完整的示例代码，它演示了如何在 React 中实现 SSE 信息推送：
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
----------------- ------------
-------------- -- -
----- ---- - --- ---------------------
---------------- --------------
-- ------
- ---- -
------------------ - --------------- ----------- ---
----------------------------- - -------------------------
-
---
------------------- -- -- -
------------------- -- ------- -- ------------------------
---在上面的代码中，我们创建了一个 HTTP 服务器，并在 /sse 路径上实现了 SSE 接口。当客户端访问 /sse 路径时，服务器会返回一个 text/event-stream 类型的响应，这个响应包含了 retry 和 data 字段。retry 字段指定了客户端重连的时间间隔，data 字段包含了服务器发送的事件数据。在本例中，我们每秒向客户端发送一个包含当前时间的事件数据。
客户端代码
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
-------- ---------------------- -
----- --------- ----------- - -------------
------------ -- -
----- ----------- - --- --------------------
--------------------- - ------- -- -
-----------------------
--
------ -- -- -
--------------------
--
-- ----
------ -
-----
------- ------------
----------------
------
--
-
------ ------- ---------------------在客户端代码中，我们创建了一个 React 组件，并在 useEffect 钩子中建立 SSE 连接。当接收到服务器发送的事件时，我们将事件数据存储在组件的状态中，并在渲染时显示事件数据。
总结
本文介绍了如何使用 React 实现 SSE 信息推送，并提供了示例代码以供参考。SSE 是一种简单而可靠的实现实时通信的技术，适用于很多场景，例如聊天应用、股票行情等。如果你需要实现实时通信功能，可以考虑使用 SSE。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fb93fdd10417a2227287b4