在现代 Web 应用中，实时通信成为了越来越重要的需求。传统的 HTTP 请求形式的通信难以满足实时性要求，因此 WebSockets 技术成为了较为流行的解决方案。而在管理应用状态方面，Redux 提供了一种优雅且容易维护的方式，通过 Redux 和 WebSocket 的结合使用，可以方便地组织应用的状态，并实现全双工的实时通信。本文将介绍使用 Redux 和 WebSocket 实现实时通信应用的方法，以便更好地满足实时通信的需求。
WebSocket 基础
WebSocket 是 HTML5 中一种新的协议，它建立在 TCP 协议之上，通过类似握手的机制建立起一条持久的连接，以实现全双工通信。相比传统的 HTTP 协议，在 WebSockets 中，一旦连接建立，就可以实现服务端主动向客户端推送数据的功能，而不需要客户端先发送请求。这种实时性的特性使得 WebSockets 成为实时推送、即时消息等应用场景的理想解决方案。
使用 WebSocket 通信的基本流程如下：
- 客户端通过 WebSocket 的构造函数创建一个 WebSocket 实例，并向指定的服务端发起连接请求。
- 服务端接收到连接请求后，返回一个类似 HTTP 返回头的握手响应，客户端进行认证。
- 如果认证通过，WebSocket 连接就建立成功了。此后客户端和服务端之间可以随时发送和接收消息。
在 JavaScript 中，可以通过 WebSocket 对象对 WebSocket 进行操作，WebSocket 对象提供了一系列的事件和方法来处理 WebSocket 的连接和通信，我们可以借助这些事件和方法实现复杂的通信功能，WebSocket 对象的使用方法如下：
-- -------------------- ---- ------- ----- ------ - --- -------------- ----------- ------------------------------- ----- -- - -- --------------- --- ---------------------------------- ----- -- - -- ------------- --- -------------------------------- ----- -- - -- -------------- --- -------------------------------- ----- -- - -- ------------- --- --------------------- -- -------- --------------- -- -- --------- --
Redux 基础
Redux 是一种状态管理库，它提供了一种容易理解和维护的方式来管理应用的状态。Redux 的基本原则是单一数据源，也就是说，所有的应用状态都存储在一个状态树中，Redux 中的状态是只读的，任何修改都需要通过 dispatch 一个 action 来进行。通过这种方式，Redux 可以轻易地实现可预测的应用状态管理，同时也方便进行状态调试和时间旅行等功能。
Redux 主要包含了三个部分：
- Actions：描述状态树的变化，是一个普通的 JavaScript 对象。
- Reducers：根据 actions 中描述的变化，返回新的应用状态树。
- Store：维护应用的状态树，并提供了一些方法来对状态树进行操作。
一个 Redux 应用的基本使用方法如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- ---- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- ------------ --
---- --------------
------ - --------- ------ ----------------------- -- ------- --- --------------- --
--------
------ ------
-
--
-- -- --------- -------
----- ----- - ---------------------
-- ----
------------------ -- -
------------------------------
---
-- -------- -- ------
---------------- ----- ----------- ----- - --- -- ----- ------- ------- - ---WebSocket 与 Redux 结合
结合 Redux 和 WebSocket 来实现实时通信的应用，主要有两个方案：一个是使用 Redux 中间件来封装 WebSocket 连接操作，使得我们可以通过 dispatch 动作就可以完成 WebSockets 的连接和通信；另一个是使用 Redux 中间件将 WebSockets 的消息自动转化为 Redux 的动作类型，以便我们可以使用标准的 action-reducer-store 的流程来管理状态。这两种方案各有利弊，选择哪种方案需要根据具体场景进行选择。
方案一：使用 WebSocket Middleware 封装 WebSocket 连接
使用 WebSocket Middleware 可以方便地创建一个透明的 WebSocket 连接，并通过 Redux 动作进行操作，使得 Redux Store 中的状态可以自动同步到 WebSocket 连接中。WebSocket Middleware 的基本使用方式如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------------- ---- -----------------------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- --------------------
------ - --------- ---------- ---- --
---- -----------------------
------ - --------- ---------- ----- --
---- --------------------
------ - --------- -------- -------------- --
--------
------ ------
-
--
----- ---------- - -----------------------------------------------
----- ----- - -------------------- -----------------------------
-- ---- --------- -------
---------------- ----- ------------------- ---
---------------- ----- ----------------- -------- - ------ ------- - ---
---------------- ----- ---------------------- ---通过这个例子可以看出，使用 WebSocket Middleware 可以通过 dispatch 发送 WEBSOCKET_CONNECT、WEBSOCKET_SEND、WEBSOCKET_DISCONNECT 等动作类型，实现了向 WebSocket 服务器发送消息的功能，同时也可以通过 WEBSOCKET_MESSAGE 类型的动作接收 WebSocket 服务器的推送消息，并进行相关处理。
方案二：使用 WebSocket Middleware 将消息转化为 Redux 动作
使用 WebSocket Middleware 将 WebSockets 消息转化为 Redux 动作，可以将 WebSockets 消息自动化地集成到 Redux 应用架构中，并可以很方便地通过标准的 action-reducer-store 机制进行状态管理。WebSocket Middleware 的基本使用方法如下：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------------------------- ---- -----------------------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- --------------
------ - --------- --------- ---------------- ------------------ --
---- ------------
------ - --------- ------ ----------------------- -- ---- --- --------------- --
--------
------ ------
-
--
----- ---------- - ---------------------------------------------- -
-
------ ---- ---------
----- -------------
--
-
------ ----- ------
----- -----------
-
---
----- ----- - -------------------- -----------------------------
-- -------- --- --------- -------
---------------- ----- ------------------- ---
---------------- ----- -------------- -------- - ------- -------- -------- ------- ------- - ---通过这个例子可以看出，使用 WebSocket Middleware 将 WebSockets 消息转化为 Redux 动作，可以使得 WebSockets 消息自动化地集成到应用架构中，并在应用程序内部进行统一处理，方便进行状态管理。
示例应用：实现聊天室功能
为了更好地理解 Redux 和 WebSocket 的结合使用，下面将结合一个示例应用来演示如何实现基本的聊天室功能。
本示例应用使用了方案二，即使用 WebSocket Middleware 将 WebSockets 消息转化为 Redux 动作。
实现 WebSocket 连接
首先在应用初始化时，需要使用 Redux Middleware 创建 WebSocket 连接，示例代码如下：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------------------- ---- ----------------------------- ----- ---------- - ------------------------------------------------- - - ------ ------- ----- ----------- -- - ------ ------- ----- ----------- -- - ------ ---------- ----- -------------- - --- ----- ----- - -------------------- ----------------------------- ---------------- ----- ------------------- ---
上面的代码中，使用 createWebSocketMiddleware 方法创建了一个 WebSocket Middleware 对象，指定了 WebSocket 服务器地址，以及定义了三个类型为 CHAT_JOIN、CHAT_LEFT、CHAT_MESSAGE 的动作类型，分别代表进入房间、离开房间和发送消息动作类型。在最后一行，通过 dispatch 一个 WEBSOCKET_CONNECT 动作，与 WebSocket 服务器建立连接。
接下来我们可以通过定义相应的 reducer 函数，来处理这三个动作类型。
处理聊天信息
我们来先实现 CHAT_MESSAGE 类型的聊天信息处理逻辑，使用场景是用户输入文字后，在页面中显示出来，示例代码如下：
-- -------------------- ---- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------
------ -
---------
--------- ------------------- ---------------
--
-- ----
-
--其中，CHAT_MESSAGE 动作类型的 payload 结构类如下：
{
type: 'CHAT_MESSAGE',
payload: {
username: 'user1',
content: 'Hello, World!',
timestamp: (new Date()).getTime()
}
}处理进入/离开房间
接下来我们即可处理进入/离开房间的动作类型，示例代码如下：
-- -------------------- ---- -------
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ---------------- -------------------------
--------- ------------------- ---------------
--
---- ------------
------ -
---------
------ ----------------------- -- ---- --- -------------------------
--------- ------------------- ---------------
--
-- ----
-
--其中，CHAT_JOIN 和 CHAT_LEFT 的动作类型的 payload 结构如下：
-- -------------------- ---- -------
-- ---------
-
----- ------------
-------- -
--------- --------
-------- -------
---------- ---- -----------------
-
-
-- ---------
-
----- ------------
-------- -
--------- --------
-------- -------
---------- ---- -----------------
-
-用户输入消息
最后，我们需要实现用户在输入框中输入消息后，可以通过 WebSocket 发送聊天消息的逻辑，示例代码如下：
-- -------------------- ---- -------
----- --------- - -- -- -
----- ---------- ------------ - -------------
----- ----------- - ------- -- -
--------------------------------
--
----- ------------ - -- -- -
-- ---------------- --- --- -
----------------
----- -----------------
-------- -
------ ----------
-------- --------
-
---
----------------
-
--
------ -
-----
------ ---------------- ---------------------- --
------- ----------------------------------
------
--
--上面代码中，我们定义了一个 ChatInput 组件，其中，输入框的 onChange 事件监听用户输入的聊天消息，onClick 事件用于向 WebSocket 服务器发送一个 message 事件，一旦 WebSocket 服务器成功接收该事件，聊天消息就会自动更新到聊天室中。
总结
Redux 和 WebSocket 是两个非常流行的前端技术，Redux 能够通过 action-reducer-store 机制管理应用的状态，方便进行状态统一管理和时间旅行等操作，WebSocket 能够实现全双工通信，满足实时通信需求。Redux 和 WebSocket 的结合使用可以方便地组织应用的状态，并实现全双工的实时通信应用，帮助前端开发人员更好地满足实时通信的需求。在使用 Redux 和 WebSocket 结合开发聊天室等实时通信应用，我们可以选择使用 WebSocket Middleware 来封装 WebSocket 连接操作，并自动将 WebSockets 消息转化为 Redux 动作类型完成整个应用的状态管理。希望这篇文章可以帮助大家更好地理解前端实时通信的开发流程，为业务开发提供一些思路和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6c993f6b2d6eab32239c9