redux-socket-create-listeners是一个用于React和Redux的NPM包，用于创建和管理实时socket连接。使用此包可以轻松定义和创建socket监听器，并在Redux store中自动管理连接状态。本文将详细介绍如何使用这个NPM包。
安装
使用 npm 来安装 redux-socket-create-listeners：
npm install redux-socket-create-listeners
用法
初始化
你需要首先在Redux Store中导入 socketMiddleware 和 socketReducer。
-- -------------------- ---- ------- -- -------- ------ - ---------------- ------------ --------------- - ---- -------- ------ - ----------------------- ------------- - ---- -------------------------------- ----- ---------------- - ------------------------ ----- ---- --- ----- -------- - ----------------- ------- -------------- --- ----- ----- - ------------ --------- ---------------------------------- -- ------ ------- ------
createSocketMiddleware 是一个函数，它接受一个对象参数，其中包含以下键值：
port- socket连接的端口（必选）
现在，你已经可以在整个应用程序中使用 store 对象了。注意，如果你希望使用不同的端口，只需要将createSocketMiddleware()的port参数更改为所需的端口即可。
创建监听器
现在，你可以开始创建你的socket监听器。
-- -------------------- ---- -------
-- -----------
----- ------------------ - -------- -- -
------ ---------- -- -
-------------------- ------ -- -
---------- ----- -------------- -------- ---- ---
---
--
--
------ ------- -------------------addMessageListener 函数需要一个socket作为参数，以便在其上挂接socket事件。这个函数还返回了一个带有 dispatch 参数的回调函数，可以用于从Redux store中dispatch一个action。
现在我们将这个监听器添加到Redux store中。可以在 store.js 文件中的 createStore 方法中添加它。
-- -------------------- ---- ------- -- -------- ------ - ---------------- ------------ --------------- - ---- -------- ------ - ----------------------- ------------- - ---- -------------------------------- ------ ------------------ ---- ------------- ----- ---------------- - ------------------------ ----- ---- --- ----- -------- - ----------------- ------- -------------- --- ----- ----- - ------------ --------- ---------------------------------- -- ------------------------------------------------------------
发送信息
现在，我们需要发送一些信息到实时socket服务器。可以使用 socket.send('message', data) 方法。
-- -------------------- ---- -------
-- ---------
------ ------ ---- ------------
------ ----- ---------- - ------ -- -
------ ---------- -- -
---------------------- ------
--
--socket 对象是从 redux-socket-create-listeners 中导入的，它使用与Redux store相同的socket连接。
获取socket状态
你通过Redux store来获取socket连接状态。
-- -------------------- ---- -------
-- ------------
------ - ------------ ----------- - ---- --------------
----- --------- - -- -- -
----- -------- - --------------
----- ----------- - ------------------- -- --------------
----- ------- - -- -- -------------------------- ----------
------ -
-----
------- -------------------------------
--------- ------- ------------------------
------
--
--
------ ------- ----------socketState 对象包含 status 和 errorMessage 属性。status 属性用于检查socket连接是否处于活动状态。 errorMessage 属性用于检查因任何错误而导致的socket连接失败。
示例
-- -------------------- ---- ------- -- -------- ------ - ---------------- ------------ --------------- - ---- -------- ------ - ----------------------- ------------- - ---- -------------------------------- ------ ------------------ ---- ------------- ----- ---------------- - ------------------------ ----- ---- --- ----- -------- - ----------------- ------- -------------- --- ----- ----- - ------------ --------- ---------------------------------- -- ------------------------------------------------------------ ------ ------- ------
-- -------------------- ---- -------
-- -----------
----- ------------------ - -------- -- -
------ ---------- -- -
-------------------- ------ -- -
---------- ----- -------------- -------- ---- ---
---
--
--
------ ------- --------------------- -------------------- ---- -------
-- ---------
------ ------ ---- ------------
------ ----- ---------- - ------ -- -
------ ---------- -- -
---------------------- ------
--
---- -------------------- ---- -------
-- ------------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -----------
----- --------- - -- -- -
----- -------- - --------------
----- ----------- - ------------------- -- --------------
----- ------------ - ------------------- -- ---------------
----- --------- ----------- - -------------
----- -------- - ------- -- -
-------------------------------
--
----- ------- - -- -- -
------------------------------
--
------ -
-----
------ ----------- --------------- ----------------------------
------- -------------------------------
--------- ------- ------------------------
----------- ------------------
------
--
--
------ ------- ----------结论
使用redux-socket-create-listeners包可以轻松地创建和管理实时socket连接，并将其集成到Redux store中。可以使用此包创建新的监听器并发送信息。同时，使用selector从store中获取socket状态，以便在React组件中显示连接状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8ba1