前言
在现代 Web 开发中，前端应用程序已经从简单的静态网站演变为复杂的、可交互的应用程序。与此同时，数据的处理和通信也变得越来越重要。Redux 是一个流行的 JavaScript 应用程序状态管理库，Primus 则是一个支持多个实时协议的库。redux-primus 将 Redux 和 Primus 结合在一起，使得在 Redux 中处理 WebSocket 能够变得更加简单。
在本文中，我们将介绍 npm 包 redux-primus 的用法，并通过一个简单的示例演示如何在 Redux 中使用此包来处理 WebSocket 通信。
redux-primus 简介
redux-primus 是一个针对 Redux 应用程序的 WebSocket 中间件。它将 WebSocket 操作放在 Redux 的 action 中，使得我们可以很容易地在 Redux 中管理 WebSocket 消息和状态。
redux-primus 是基于 Primus 构建的，Primus 是一个支持多协议的 WebSocket 库。这意味着你可以在你的应用程序中使用多种实时协议，例如 Engine.IO、SockJS 等等。
安装
redux-primus 可以通过 npm 安装。在终端中输入以下命令即可安装：
npm install redux-primus --save
使用
配置 redux-primus 中间件
首先，在你的 Redux 应用程序中使用 redux-primus 中间件。在你的 store.js 文件中，你需要添加一些代码来创建 Primus 连接和配置 redux-primus 中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------------ ---- --------- ------ ----------- ---- ------------- ------ - ---------------------- - ---- --------------- ----- ------ - --------------- -- ------ ----- ---------------- - ------------------------------- ----- ----- - ------------ ------------ ---------------------------------- --
以上代码中，我们首先创建了一个 Primus 服务的实例，并使用 createPrimusMiddleware 方法来创建 redux-primus 中间件。在 createStore 函数中，我们将这个中间件作为 applyMiddleware 方法的参数来使用。
发送 WebSocket 消息
下面是一个简单的在组件中发送 WebSocket 消息的示例：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ----------- - ---- ----------------------------
----- ---------------- ------- --------------- -
----- - -
-------- ---
--
------------ - ------- -- -
--------------- -------- ------------------ ---
--
------------ - ------- -- -
-----------------------
----- - ----------- - - -----------
----- - ------- - - -----------
---------------------
--------------- -------- -- ---
--
-------- -
----- - ------- - - -----------
------ -
----- -----------------------------
------
-----------
---------------
----------------------------
--
------- --------------
----
---------
-------
--
-
-
------ ------- ------------- - ----------- ---------------------在这个示例中，我们通过 connect 方法将 sendMessage action 和组件关联起来。在 handleSubmit 函数中，我们调用 sendMessage action 并将组件中定义的消息作为参数传入。
处理 WebSocket 消息
接下来是一个简单的处理 WebSocket 消息的 reducer：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------------ - -
------ ---
--
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ---------------- ----------------
--
--------
------ ------
-
-这个 reducer 接受一个 ADD_MESSAGE action 并将 action 的 payload 添加到 state 的 items 数组中。
发送和处理 WebSocket 消息的 action
最后，是发送和处理 WebSocket 消息的 action：
-- -------------------- ---- -------
------ - ----------- - ---- ----------
------ -------- -------------------- -
------ -
----- ---------------
------- -
----- -
---------- ----------
---------- - ------- --
--
--
--
-
------ -------- ----------------------- -
------ -
----- ------------
-------- --------
--
-在 sendMessage action 中，我们使用 primus 对象将发送的消息传递到服务器。在 receiveMessage action 中，我们简单地将接收到的消息返回。 请注意，在 sendMessage action 中，primus 对象的格式必须使用 send 属性，也就是说这是一个以 send 事件通过 Primus 连接发送消息的事件。
示例
在这个示例中，我们将创建一个小型的聊天应用程序，使我们能够发送和接收 WebSocket 消息。
首先，我们需要一个聊天服务器，可以使用 Primus 和 Node.js 来实现。在服务器代码的顶部添加以下代码：
const primus = new Primus({
port: 8080,
});这将创建一个在 Port 8080 上监听的 Primus 服务器。
接下来，在客户端代码根文件夹中，添加一个 server.js 文件，来与上面的服务器建立连接：
-- -------------------- ---- ------- ------ ------------ ---- --------- ------ - ----------------------- --------------- - ---- --------------- ------ -------------- ---- -------------- ----- ------ - --------------- ------------ ---- ----- ---------------- - ------------------------------- ----- ----- - --------------------------------- -------------------- --------- -- - ----------------------------------------- ---
在这个示例中，我们首先创建了一个 Primus，并使用 createPrimusMiddleware 方法来创建 redux-primus 中间件。我们还使用 configureStore 函数创建 Redux store。最后，在 primus.on('message') 回调方法中，我们将收到的消息派发到 store 中。
接下来，我们需要一个 chatInput.js 文件来处理输入和发送消息：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------------- - ---- ------------------
----- --------------- - ------- -- -----
----- ------------------ - -
----------------
--
----- --------- ------- --------- -
----------- ------- -
-------------
---------- - -
-------- ---
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
----------------- ------- -
--------------- -------- ------------------ ---
-
------------ ------- -
-----------------------
----- - --------------- - - -----------
----- - ------- - - -----------
-------------------------
--------------- -------- -- ---
-
------ -- -
----- - ------- - - -----------
------ -
----- -----------------------------
------
-----------
---------------
---------------------------------
---------------- -------------
--
------- ---------------------------
-------
--
-
-
------ ------- ------------------------ -------------------------------在这个示例中，我们使用 connect 方法连接了 Redux store 中的 sendChatMessage action。
最后，我们需要一个 chatMessages.js 文件来处理来自服务器的消息。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- --------------- - ------- -- --
--------- --------------------
---
----- ------------ ------- --------- -
------ -- -
----- - -------- - - -----------
------ -
----
----------------------- ------ -- --- ----------------------------
-----
--
-
-
------ ------- ---------------------------------------在这个示例中，我们连接了 Redux store 中的 messages 数组。
在这个示例中，我们完成了发送和接收 WebSocket 消息的全流程。你可以从这个示例中学到如何使用 redux-primus 来管理 WebSocket 消息和状态。
提示
本文只是简单介绍了如何使用 redux-primus，它的使用方法和配置方法还有很多细节需要注意。在使用 redux-primus 时，请确保你在文档和代码中遵循最佳实践。
结论
在本文中，我们介绍了 npm 包 redux-primus 的用法，并通过一个简单的示例演示了如何在 Redux 中使用此包来处理 WebSocket 通信。我们希望这篇文章能够帮助你更好地理解 Redux 中的 WebSocket 消息和状态的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab381e8991b448d84d6