什么是 SSE？
SSE（Server-Sent Events）是一种基于 HTTP 协议的服务器推送技术，它允许服务器在客户端打开的连接上实时地推送数据。SSE 最初被设计用于 Web 应用程序中的实时通信，它比 WebSockets 更轻量级，不需要建立双向连接，适用于一些简单的实时通知场景。
SSE 的优势
相较于传统的轮询技术，SSE 有以下优势：
- 实时性更高：SSE 支持服务器主动推送数据，客户端可以实时地接收到最新的数据，不需要等待下一次轮询。
- 更加高效：SSE 基于 HTTP 协议，不需要建立双向连接，也不需要每次发送请求时都携带请求头和请求体，减少了网络传输的开销。
- 更加灵活：SSE 支持自定义事件类型和数据格式，开发者可以根据自己的需求自行定义事件和数据格式。
SSE 在 React.js 中的实现
React.js 是一种非常流行的前端框架，它提供了一种声明式的编程方式和一些方便的工具，使得我们可以更加高效地构建 Web 应用程序。下面我们将介绍如何在 React.js 应用程序中使用 SSE 技术。
1. 安装依赖
我们首先需要安装一个支持 SSE 的库，比如 EventSource。可以使用 npm 或者 yarn 安装：
npm install eventsource # 或者 yarn add eventsource
2. 创建 SSE 连接
在 React.js 中，我们可以使用 useEffect 钩子来创建 SSE 连接。在 useEffect 中，我们可以使用 EventSource 对象创建一个 SSE 连接，并在 message 事件中处理服务器推送的数据。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----------- ---- --------------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- ------ - --- --------------------
---------------------------------- ------- -- -
-----------------------
---
------ -- -- -
---------------
--
-- ----
------ -
--------------------
--
-
------ ------- ----上面的代码中，我们创建了一个 App 组件，使用 useState 钩子来维护一个 message 状态，用来显示服务器推送的数据。在 useEffect 中，我们使用 EventSource 对象创建了一个 SSE 连接，并在 message 事件中更新 message 状态。最后，我们在组件中显示 message 状态。
3. 服务器端代码
在服务器端，我们需要创建一个 SSE 接口，用来处理客户端的连接请求和推送数据。下面是一个使用 Express.js 框架的简单示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- -------------
---
----- ---------- - -------------- -- -
---------------- ----- ----------------------------
-- ------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- -
------------------- ------- -- ---- -------
---上面的代码中，我们创建了一个 /sse 接口，用来处理 SSE 连接请求。在响应头中设置了 Content-Type 为 text/event-stream，表示这是一个 SSE 响应。同时，我们设置了 Cache-Control 为 no-cache，表示不缓存响应。另外，我们还设置了 Connection 为 keep-alive，表示保持连接持久化。
在接口的实现中，我们使用 setInterval 定时向客户端推送数据。在客户端关闭连接时，我们清除定时器。
总结
本文介绍了 SSE 技术在 React.js 应用程序中的实现和应用。我们首先介绍了 SSE 的优势，然后讲解了在 React.js 中使用 SSE 的步骤，最后给出了一个简单的示例代码。希望本文能够对初学者有所帮助，为大家在实际项目中使用 SSE 提供一些参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65732c2fd2f5e1655dc4be7d