在现代 Web 应用程序的开发中，实时通信已经变得非常重要。例如，当您在社交网络中收到新消息时，您希望应用程序能够立即通知您。与此类似，如果您正在使用在线游戏，则要求实时通信实际上是必要的。在这篇文章中，我们将讨论在 React SPA 项目中实现实时通信的最佳方式。
WebSocket 连接
在为 React SPA 项目实现实时通信时，WebSocket 是展现实时通信最常用的方法。由于它们是实时的，因此对服务器响应的时间非常敏感。但不幸的是，WebSocket 通信不能直接在标准的 HTTP 服务器上完成，因此需要我们采用一个额外的服务器（通常是基于 Node.js 或 Python 等技术开发的）。
socket.io 是一个非常流行的 JavaScript 库，它使得实现 WebSocket 通信变得更加容易。它为我们提供了处理复杂事件的能力以及可靠的断开连接的功能。 socket.io 建立在 WebSocket 协议之上，并通过使用轮询机制来向浏览器提供相同的 WebSocket 体验，在浏览器不支持 WebSocket 的情况下适用。
使用 socket.io，我们可以轻松地在我们的 React SPA 中建立一个 WebSocket 连接。让我们看一下如何使用 socket.io 建立实时通信。
-- -- ---------------- --- ------- ---------------- -- -- ---------------- ------ -- ---- ------------------- -- -- --------- -- ----- ------ - ---------------------------- -- ---------- -------------------- ------ -- - --------------------- ---------- ------ --- -- --------- ---------------------- ------ ------ ---- -----------
在这个例子中，我们使用 socket.io-client 建立一个 WebSocket 连接，并通过监听 message 事件来接收来自服务器的消息。我们还使用 emit 方法将一条消息发送到服务器。这个例子非常简单，但是它展示了建立 WebSocket 连接的核心代码，并显示了如何使用 socket.io 来发送和接收消息。
将 WebSocket 集成到您的 React 应用中
使用 socket.io 建立 WebSocket 连接是做实时通信的关键。但要让它在 React 应用程序中工作，我们需要将 WebSocket 集成到我们的应用程序架构中。让我们看一下如何在 React SPA 项目中使用 socket.io。
将 WebSocket 状态集成到 Redux store 中
在 React SPA 中，用于管理应用程序状态的最流行的工具之一是 Redux，因此将实时通信集成到 Redux store 中是有意义的。首先，我们需要将 WebSocket 的连接状态与 Redux store 中的状态同步。为此，我们可以创建一个 socket 模块，通过 WebSocket 连接维护有关 WebSocket 连接的状态。我们的 socket 模块应该包含以下：
------ -- ---- -------------------
----- -------- - ------------------------
------ ----- -------------- - -----------------
------ ----- ----------------- - --------------------
------ ----- ---------------------- - -------------------------
-- ------- -------
------ ----- ------- - -- -- --
----- ---------------
---
------ ----- ---------- - -- -- --
----- ------------------
---
------ ----- -------------- - ------ -- --
----- -----------------------
-------- -----
---
-- -------
----- ------------ - -
------------ ------
-------- --
--
------ ------- -------- ------------------- - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
------------ -----
--
---- ------------------
------ -
---------
------------ ------
--
---- -----------------------
------ -
---------
-------- ---------------
--
--------
------ ------
-
-
-- --- --------- --
----- ------ - -------------
------ ------- -------通过这个 socket 模块，我们可以通过 Redux store 管理 WebSocket 连接的状态。我们还导出了与 WebSocket 通信相关的动作创造者和 reducer。在这个例子中，我们可以将 SOCKET_RECEIVE_MESSAGE 动作与 Redux store 的状态同步。每当我们收到一个 message 事件时，我们就会更新 store 的 message 字段。
在 React 组件中使用 WebSocket
现在，我们已经有了一个维护 WebSocket 连接的 module ，让我们看看如何在我们的 React 组件中使用它。我们可以为每个组件创建一个包装组件，用于管理启动/关闭 WebSocket 连接的生命周期方法。让我们看一个例子：
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ ------- - -------- ----------- -------------- - ---- ------------
----- ---------- - ------------------ -- -
----- ---------- - ------- -- -
----- -------- - --------------
----- ----------- - ------------------- -- --------------------------
----- ------- - ------------------- -- ----------------------
------------ -- -
-- -- --------- --
--------------------
-- ----------
-------------------- ------ -- -
------------------------------------
---
------ -- -- -
-- -- --------- --
-----------------------
--------------------
--
-- ---------- --------------
------ ----------------- ----------------- ---------- ---
--
------ -----------
--
------ ------- -----------在这个例子中，我们使用 useEffect 钩子函数，确保在组件挂载和卸载时连接和断开 WebSocket 连接。我们使用 useSelector帮助我们连接 store 状态，以使我们能够访问 store 中的 message。在实例化Wrapped组件之前，我们还添加了一个高阶组件 WithSocket ，以获得来自 Redux store 的 socket 状态，并将 socket 状态作为属性传递给 Wrapped 组件。
在 React 组件中更新 WebSocket
现在，我们已经有了一个可以操纵 WebSocket 的基础结构，在 React 组件中为 WebSocket 添加新功能将变得容易。让我们看看如何在 React 组件中使用 WebSocket。
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------------
------ ------ ---- ------------
----- ---- - -- -- -
----- ------- --------- - -------------
----- -------- - --------------
----- ----------- - -- -- -
-- -------------------
----------------- --------- -------
-------------
--
------ -
-----
------
-----------
-------------
------------- -- -------------------------
----------------- - --------
--
------- -----------------------------------
------
--
--
------ ------- -----在这个例子中，我们创建了一个简单的聊天组件。当用户输入一条消息并点击“发送”按钮时，我们使用 socket.emit 方法将消息发送到服务器。我们并不需要使用 Redux 来管理这个 chatMessage 状态，因为聊天状态并不依赖于其他组件。在需要使用 WebSocket 的任何组件中，都可以像这样轻松使用 socket.emit() 方法来更新 WebSocket。
总结
使用 WebSocket 在 React SPA 项目中实现实时通信，是现代 Web 应用程序开发的重要组成部分之一。WebSockets 的实时性对于要求服务器快速响应的应用程序来说是至关重要的。因此，使用 socket.io 来建立WebSocket连接是实现实时通信的关键所在，而将 WebSocket 集成到 Redux 的 store 中，能提供更好的状态管理能力。最后，通过在 React 组件中使用 WebSocket，可以使每一个组件都能够方便地使用实时通信。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66517dc2d3423812e4543316