介绍
redux-simple-websocket 是一个 Redux 插件，用于管理 WebSocket 连接。它可以让开发者方便地编写基于 WebSocket 的实时应用，从而加强用户体验。
安装
首先需要使用 npm 安装 redux-simple-websocket：
npm install redux-simple-websocket --save
使用
在使用 redux-simple-websocket 前，我们需要先配置 WebSocket 的服务器地址。可以在应用启动时通过 store.dispatch 动态更新服务器地址：
import { configureWebSocket } from 'redux-simple-websocket';
store.dispatch(configureWebSocket('ws://localhost:8080'));接下来，我们需要定义 WebSocket 的 actions。actions 的名字通常以 WEBSOCKET_ 开头：
-- -------------------- ---- ------- ------ - ------------------ --------------- -------------------- - ---- ------------------------- -- -- --------- ------ ----- ---------------- - -- -- -- ----- ------------------ --- -- -- --------- -- ------ ----- -------------------- - --------- -- -- ----- --------------- -------- -------- --- -- -- --------- -- ------ ----- ------------------- - -- -- -- ----- --------------------- ---
可以看到，我们只需要使用 WEBSOCKET_CONNECT、WEBSOCKET_SEND 和 WEBSOCKET_DISCONNECT 这几个常量就能完成 WebSocket 的连接、发送消息和断开连接等操作。
接下来，我们需要使用 redux-simple-websocket 中间件将上述 actions 添加到 Redux 的 dispatch 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- ------------------------- ----- ---------- - ---------------------- ----- ----- - ------------ -------- ------------------------------- --
现在我们就可以在 Redux 的 action 中使用上述 actions。例如，我们想要在用户登录后向服务器发送一条 WebSocket 消息：
-- -------------------- ---- ------- ------ - ----------------- -------------------- - ---- --------------------- ------ ----- ----- - ---------- --------- -- ---------- -- - -- ------ ----------------------------- ----- ------- - - ----- -------- -------- -------- -- -------------------------------------------------------- --
注：该示例需要在服务器端进行相应的处理，具体的实现方式可以参考 这篇文章。
可自定义的 action
为了更灵活地处理 WebSocket 的事件，redux-simple-websocket 提供了多个可自定义的 action。在上述示例中，我们只能向服务器发送一条固定的消息。接下来，我们将演示如何自定义 action 来处理用户登录反馈：
-- -------------------- ---- -------
------ - ---------------------- ------------------ ----------------- - ---- -------------------------
-- -- ---------
------ ----- ---------------- - -- -- --
----- ------------------
---
-- ----
------ ----- ----- - ---------- --------- -- -----------------------
----- --------
----- -- -- -- ----- -------- -------- -------- ---
-------- --------- -- -
----- -------- - -------------------------
-- ---------------- --- ---------- -
-- ----
------ - ----- --------------- --
-
-- ----
------ - ----- --------------- --
--
---可以看到，我们将 sendWebSocketMessage 和 receiveWebSocketMessage 都封装在了 createWebsocketAction 中。createWebsocketAction 接受一个对象作为参数，该对象有以下属性：
type（必须）：action 的类型。send（可选）：发送消息的函数。receive（可选）：接收消息的函数。
当我们在 dispatch 这样的 action 时，redux-simple-websocket 会自动地为我们发送和接收消息。
总结
通过这篇文章，我们学习了如何使用 npm 包 redux-simple-websocket 来处理 WebSocket 连接。通过这个插件，我们可以很方便地处理实时应用的数据传输，并获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607b81e8991b448dead4