redux-ws 是一个可以用于前端应用的 WebSocket 连接管理库，使用它可以方便的在应用中进行 WebSocket 数据通信。在本文中，我们将介绍它的使用方法。
安装和配置
要使用 redux-ws，需要先安装它。打开终端或命令行窗口，输入以下命令安装它：
npm install --save redux-ws
安装完成后，在 Redux 的 createStore 中配置中间件即可开始使用。示例代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ ------------------------- ---- ----------- ------ ----------- ---- ------------- ------ - -------------- ------------ - ---- ------------------ ----- --------- - ------------------------- ----- ---------- - ------------------------------------ - ------------- -- -- -- ----- ------------- --- ------------ -- -- -- ----- ------------ -- --- ----- ---------------- - ------------------------------------------- -- -------- ----- -------- - ---------------------------------------------- ----- ----- - ------------ ------------ -------- --
使用方法
redux-ws 的 API 很简单，并且和 Redux 中间件的使用方式非常相似。具体来说，需要定义一个和 WebSocket 连接相关的 action creator，并将其发送给 redux-ws 中间件，以便它发送 WebSocket 消息并处理回应。
首先，我们需要定义一个 WebSocket 获取数据的 action creator，示例代码如下：
function getWsData(id) {
return {
type: 'ws/GET_DATA',
payload: { id }
};
}接下来，我们将该 action creator 发送给 redux-ws 中间件，并定义它的处理函数。处理 WebSocket 回应可以通过 redux-thunk 的方式完成。示例代码如下：
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- ----------- -
----- -------- - --------------
----- --------- - ------- -- -
--- -
----- ------- - -----------------------
-- ------------- --- ---------- -
----------
----- -------------------
-------- ---------------
---
-
- ----- ------- -
-- ---
-
--
----- ------- - ---- -- -
------------------------
--
------ - ---------- ------- --
-在上述代码中，我们定义了一个名为 useWsData 的自定义 Hook，并将 getWsData 发送给 redux-ws 中间件以便处理。当 WebSocket 接收到 ws/DATA 消息时，onMessage 会将其解析为对象格式并发送一个 Redux action，Reducer 会据此更新应用的状态。
考虑到 WebSocket 连接可能会断开，我们需要在组件的挂载和卸载阶段分别建立和关闭 WebSocket 连接。示例代码如下：
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ----------------- ------------------- - ---- -----------
-------- --------------- -
----- - ---------- ------- - - ------------
------------ -- -
----------------------------
------ -- -- -
----------------------
--
-- -------------
-- ---
-在上述代码中，我们分别在组件的挂载和卸载阶段调用 connectWebSocket 和 disconnectWebSocket 函数，以建立和关闭 WebSocket 连接，并通过 onMessage 处理 WebSocket 消息。
总结
在本文中，我们讲解了如何使用 redux-ws 库在前端应用中进行 WebSocket 连接管理。通过了解 redux-ws 的安装、配置、使用方法以及有关处理 WebSocket 消息的一些技术，我们可以更好地实现应用中的 WebSocket 数据通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ceb