在现代 Web 应用中，实时数据更新变得越来越重要。很多应用需要在用户浏览某个页面时及时更新数据，以提供更好的用户体验。目前常见的实时数据更新方式有两种，即 WebSocket 和 Server-sent Events。本文将探讨如何在 React 中使用 Server-sent Events 实现实时数据更新，并提供示例代码。
Server-sent Events 简介
Server-sent Events 是 HTML5 中新增的一个通信协议，用于服务器向客户端推送事件。这些事件可以是任何类型的数据，例如 JSON 对象、文本、HTML 等等。与 WebSocket 不同，Server-sent Events 是基于 HTTP 协议，可以轻松地与现有的 Web 系统集成。
在使用 Server-sent Events 时，客户端通过在 JavaScript 中创建一个 EventSource 对象来与服务器建立连接。一旦连接建立成功，服务器就可以向客户端推送事件。客户端在接收到事件后，可以使用 JavaScript 更新页面上的数据。
在 React 中使用 Server-sent Events
为了在 React 中使用 Server-sent Events，我们需要将 EventSource 对象包装成一个 React 组件。这个组件建立连接后，可以将接收到的数据传递给子组件进行渲染。
以下是一个简单的 Server-sent Events 组件的示例：
-- -------------------- ---- -------
------ ------- -------- ------------- ---- ------ -- -
----- ------ -------- - ---------------
------------ -- -
----- ------ - --- -----------------
---------------- - ------- -- -
----- ------- - -----------------------
-----------------
--
------ -- -- -
---------------
--
-- -------
------ --------------------
-这个组件接收两个参数，分别是 url 和 render。url 是 Server-sent Events 的 URL，render 是一个回调函数，用于将接收到的数据渲染成组件。
在 useEffect 中创建 EventSource 对象，并将接收到的数据存储在组件的状态中。当组件更新时，会重新建立连接，并清除之前的状态。
使用这个组件的方式如下：
function MyComponent() {
return (
<SseProvider url="/sse" render={(data) => <div>{data}</div>} />
);
}这个组件将接收到的数据渲染成了一个 div 元素，并将其传递给父组件进行渲染。
实现实时数据更新的示例
为了演示 Server-sent Events 的实时数据更新功能，我们可以创建一个简单的聊天应用。这个应用将接收用户的消息，并将其显示在聊天窗口中。另外，用户也可以看到其他用户发送的消息。
以下是实现聊天应用的代码：
-- -------------------- ---- -------
-------- --------- -
----- ---------- ------------ - -------------
----- ------------- - ------- -- -
----- - ----- ------- - - -----------------------
-------------------------- -- ----------------- - ----- ------- ----
--
------ -
-----
-------- --------
---- ------------------------
------------------- -- -- -
---- ------------------- -------------------
---
------
---- --------------------------
------ ----------- --------- ---------------------- --
------ ----------- ------------ --------------------- ------------------ -- -
-- ---------- --- -------- -
-------------- -
------- -------
----- ----------------
----- --------------------------------------
-------- ----------------------------------------
---
-------- -
--------------- ------------------
-
---
---------------------------------------- - ---
-
-- --
------
------------ ---------- ---------- -- ----- ------------------------- --
------
--
-这个应用有一个聊天窗口和一个消息输入框。当用户输入用户名和消息后，敲击 Enter 键即可发送消息。
上面的代码使用了 Server-sent Events 来实现实时消息更新。当用户发送消息时，服务器会将该消息广播给所有连接到应用的用户。
总结
在本文中，我们了解了 Server-sent Events 的基础知识，并学习了如何在 React 中使用它来实现实时数据更新。我们还用一个简单的聊天应用演示了 Server-sent Events 的工作原理。
Server-sent Events 是一种简单、实用的实时数据更新方式，可以轻松地与现有的 Web 系统集成。在需要实时更新数据的应用中，它是一种非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64547ee2968c7c53b0860ef6