Server-sent Events (SSEs) 是一种在浏览器和服务器之间实现实时双向通信的协议。它可以在服务器端推送数据给浏览器，同时在浏览器端也可以向服务器发送请求。在 Web 应用程序中，SSEs 可以用于实现一个实时更新的功能，让用户可以实时地获取最新的信息。
在 React 应用程序中，我们可以使用 SSEs 来实现一个实时的更新功能。本文将介绍如何在 React 中使用 SSEs 来实现实时更新。
实现原理
SSEs 使用 HTTP 协议，但是 SSEs 是一种长轮询技术，它不同于普通的 AJAX 请求。当一个浏览器连接到一个 SSEs 服务时，它会保持连接打开，并等待服务器端发送数据。服务器端可以随时发送数据，当有数据发送时，浏览器端会通过 JavaScript API 接收到这些数据，然后可以根据需要更新页面。
在 React 应用程序中，我们可以将一个 SSEs 连接封装在一个组件中，并在组件中监听消息。当有新消息到达时，我们可以通过更新组件的状态来触发组件的重新渲染，从而实现实时更新的功能。
实现步骤
1. 在服务器端实现 SSEs 服务
首先，我们需要在服务器端实现 SSEs 服务。这里我们使用 Node.js 和 Express 框架来构建一个简单的 SSEs 服务。具体实现如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- ---- - ----------------
----- --- - ----------
----------------
------------------ ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-------------- -- -
----- ---- - - -------- ------- ------- --
---------------- ------------------------------
-- ------
---
----- ------ - -----------------------
------------------- -- -- -
---------------------- -- ---- -------
---上面的代码创建了一个 Express 应用程序，并创建了一个 /stream 路由来处理 SSEs 连接。在这个路由中，我们设置了一些响应头来告诉浏览器这是一个 SSEs 连接。然后，我们使用 setInterval() 方法来定期地向浏览器发送数据。这个例子中，我们每秒钟向浏览器发送一条消息，消息内容是一个 JSON 对象。
2. 在 React 组件中启动 SSEs 连接
接下来，我们需要在 React 组件中启动 SSEs 连接，并监听消息。具体实现如下：
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
----- ------ ------- ------------- -
------------------ -
-------------
---------- - -
-------- ---
--
-
------------------- -
----- --- - -------------------------------
----- ----------- - --- -----------------
--------------------------------------- ------- -- -
----- - ------- - - -----------------------
--------------- ------- ---
---
-
-------- -
----- - ------- - - -----------
------ -
-----
----------------
------
--
-
-
------ ------- -------在上面的代码中，我们创建了一个名为 Stream 的组件，并在它的 componentDidMount() 方法中启动 SSEs 连接，然后监听 message 事件。当有新消息到达时，我们通过更新 message 的状态来触发组件的重新渲染，从而实现实时更新的功能。
3. 在页面中使用 Stream 组件
最后，我们需要在页面中使用 Stream 组件来显示实时更新的信息。具体实现如下：
import React from 'react';
import ReactDOM from 'react-dom';
import Stream from './Stream';
ReactDOM.render(<Stream />, document.getElementById('root'));上面的代码将 Stream 组件渲染到 root 元素中。
总结
本文介绍了如何在 React 应用程序中使用 SSEs 来实现实时更新的功能。通过将 SSEs 连接封装在一个组件中，我们可以很方便地在 React 应用程序中实现实时更新的功能。至此，我们已经完成了整个教程内容，希望对你学习 React、SSEs 和实时更新有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65900d91eb4cecbf2d593040