前言
前端开发中，需要实时更新数据或者进行实时通信的场景经常出现，比如: 聊天室、在线游戏、股票行情等。WebSockets 技术被广泛应用于这些场景中，因为它可以实现双向通信，并且不会产生频繁的 HTTP 请求。Redux 是一种状态管理工具，用于管理应用程序中的状态。在 Redux 中，我们可以使用 WebSockets 来实现实时通信。
WebSocket
WebSocket 是一种在单个 TCP 连接上提供双向通信的协议。使用 WebSocket，客户端和服务器之间可以发送和接收消息，没有必要发送 HTTP 请求来获取数据。与传统的基于 HTTP 请求的异步通信相比，WebSocket 可以更高效地实现实时数据传输和通信。
WebSocket 的标准 API 由 W3C 规范化。它基于事件模型，当 WebSocket 连接建立或断开、数据接收等事件发生时，就会触发相应的事件。下面是建立 WebSocket 连接的示例代码：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------------------------- -- -- - ---------------------- ------- --- ---------------------------------- ------- -- - --------------------- ------------ --- -------------------------------- -- -- - ---------------------- -------- ---
在上面的代码中，我们创建了一个 WebSocket 对象，向服务器发送请求建立连接。根据需要，我们可以通过添加事件监听器来处理连接成功、接收消息和关闭连接等事件。
Redux
Redux 是一个流行的 JavaScript 应用程序状态容器。它提供了一个可预测的状态管理解决方案，帮助我们更好地组织和管理应用程序的数据。Redux 中的状态以单一的 store 存在，由多个 Reducer 函数负责对 store 中的状态进行操作。
Redux 的数据流向如下图所示：
我们使用 Action 创建函数创建一个 Action，Dispath 将 Action 发送到 Store，Store 再根据 Reducer 函数处理 Action，并更新对应的状态。如果需要从 Store 获取状态，则可以使用 Selector 函数。
在使用 Redux 进行实时通信时，我们可以使用的一个库是 redux-thunk。Thunk 是一个函数，用于延迟函数的执行时间。redux-thunk 可以让 Action 创建函数返回一个函数，而不是一个 Action 对象。在这个返回的函数中，我们可以执行异步操作，比如发起 WebSocket 请求。
下面是一个示例代码，演示了如何在 Redux 中使用 WebSockets 进行实时通信。该代码实现了一个简单的聊天室。
客户端
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
--------- --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ -
---------
--------- ------------------- ---------------
--
--------
------ ------
-
--
----- ----- - -------------------- ----------------------------------
----- ------ - --- ---------------------------------
---------------------------------- ------- -- -
----- ------- - -----------------------
---------------- ----- -------------- -------- ------- ---
---
----- ----------- - --------- -- -
-------------------------------------
--
------------------ -- -
----- -------- - --------------------------
---------------------- ----------
---
------------- ----- ------- ----- ---- ---
------------- -- -
------------- ----- --------------- ----- ----- -------- -------- ---
-- ------在上面的代码中，我们首先创建了一个 Redux store，并使用 applyMiddleware 函数将 redux-thunk 应用到 store 中。接着，我们建立一个 WebSocket 连接，并通过 store.dispatch 方法将从 WebSocket 接收到的消息分发给 Reducer 函数，将消息添加到消息列表中。当有新的消息添加到消息列表中时，我们可以通过 store.subscribe 方法获取新的状态，并打印出当前消息列表。最后，我们使用 setTimeout 函数模拟了一条发送消息的场景。
服务器端
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -- -
----------------------
---------------------------- ----- ---------- ----- --------- ----
-------------------- --------- -- -
--------------------- ---------
----- ---- - --------------------
------ ----------- -
---- -------
----------- - ----------
------
---- ---------------
-------------------- --------------
---------------------------- -- -
-- ------- --- ------ -- ----------------- --- --------------- -
------------
----------------
----- ----------
----- ------------
----- ------------
--
--
-
---
------
--------
-----------------------
-
---
---
---------------------- ---------在上面的代码中，我们首先创建了一个 WebSocket 服务器，并在连接成功时向客户端发送欢迎消息。接着，我们通过 socket.on('message') 监听客户端发送的消息，根据不同的消息类型执行不同的操作。当客户端发送消息时，我们遍历所有连接的客户端，并将该消息发送给所有客户端，以实现数据的实时更新。
总结
在 Redux 中使用 WebSockets 进行实时通信需要配合使用 redux-thunk，并且需要注意 Action 创建函数返回的不是一个 Action 对象，而是一个函数。使用 Redux 可以帮助我们更好地管理和组织应用程序的状态，并协调各个组件之间的数据流动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646978c9968c7c53b0961cdd