一、前言
在开发现代化的网络应用程序时，我们需要良好的 Socket.IO 实时通信架构。而此时，Node.js 的 npm 包管理工具中最为流行的一个类库就是 Redux。Redux-socketio npm 包则提供从 Socket.IO 服务器结构向 Redux 状态中心的整合。
二、使用方法
1. 安装
要使用 Redux-socketio ，您首先需要安装它。您可以使用 npm 来进行操作：
--- ------- --------------
2. 简单说明
Redux-socketio 支持两种模式：
- 推模式 (emitting mode)
监听服务器事件并通过
.emit()从网页向服务器发送新事件。 - 拉模式 (polling mode) 定期发送空数据到服务器来检查有无新数据。
3. 创建 Redux-socketio 中间件
使用 Redux-socketio 的核心是创建中间件。中间件是 Redux 可用的第三方扩展程序，它们可以拦截所有 Redux actions 并处理它们。在创建此中间件之前，请确保要将相关配置传递给其中。以下是一些示例配置。
----- -------------- - --
-------- - - -------- ------ - --- ------- -- ------ ------------ --
----- - - ---- ------------------------ -------- -- -
- - --- -- -
----- -- - ----------------------------
----- -------- - ------------- ---------------
----- ----------------- - ----------------------------------------
----- ------------------------ - --------------------------
----- ------------------ - -----------------------------------
----- - ------------ --------------- - - -----------------
----- -------- - ------------------------------------
----- ----- - ----------------------------- ---------------------- ----------
----- ------------------- - ----------- ---------- -- -
--------------------------------- -----------
--
------ - ------ ------------------- --
--
-------------- - ---------------4. 推模式
在推模式中，我们通过建立连接并绑定一些事件以便像这样发送：
---------------------- - --------- ---- ---
而我们的 Socket.IO 客户端捕捉这个事件。
------------------- ------ -- -
-------------------- ---- -- -
------------------ -- - --------- ---- -
---
---在推送到客户端之外的情况下，我们还想将事件存储到 Redux 状态树中，以便 React 以后可以访问它。然后我们可以通过 Redux-socketio 中间件来处理它。
------ - ------------- ------- - ---- -------------
------ ------------------------ ---- -----------------
----- ------------------ - ---------------------------------
--------- -------- -
----- --------- - ----- ----------------- -- -
---------------- ------
------ -- -- -
----------------- ------
--
-- --------------------
----- -------------------- --------------- -
----- ----- ---- ---
---
-上述 Saga 函数通过 Redux-Saga 为我们提供了如何处理触发的推送事件的示例。在该案例中，我们使用了 eventChannel 来订阅来自服务器的 myEvent 事件信道。这是一种数据流类型，它能让你从一个基于事件源的流中获取对象。
5. 拉模式
在拉模式中，我们新建了一个计时器代码来定时检查新数据。
----- ----------- - ------- -- -
----- -------- - ----- -------------------
-- ---------------- --- ---- ----- ----------- --- ---------
----- ---- - ----- ----------------
------ -----
-
----- ------- - -- -- ----- -------- -- -
---------- ----- ----------------- ---
----- ------ -
--- -
----- ---- - ----- --------------
---------- ----- -------------- -------- ---- ---
- ----- ------- -
---------- ----- --------------- -------- ------------- ---
-
----- ------------
-
--上述代码是如何实现从服务器拉取新数据的示例。注意 sleep() 函数，它会直接暂停程序，帮助程序以每秒 1 局仅拉一次数据的速度运行。在使用 Redux-socketio 处理事件之前，我们需要将事件处理成按照 Redux 状态树来管理的形式。
6. 以及其他
除了上述示例之外，Redux-socketio 还支持以下：
- 使用 GUN 来轻松扩展 ReactJS 状态管理。
- 在 Ruby on Rails 和 Geoserver 中使用 Redux-socketio。
- 使用 ReactNative、Firebase、recompose、GraphQL 等。
三、结合案例
------ ------ - ---------- -------- - ---- --------
------ -------------- ---- -------------------
------ ------- -------- ----------- ---------- ------- -- -
----- -------- ---------- - -----------
------------ -- -
----- ------ - ----------------------------------------
------------------
------ -- -- -
--------------------
--
-- ----
-- --------- ------ -----
------ ---------- ----------- --------- ---
-上述代码结合 Example 文件夹中的示例。同时还支持 Redux-socketio 实现 GUN、ReactJS、Ruby onRails 和 Geoserver 的状态管理等特性。
四、总结
Redux-socketio 显然是一种强大的技术工具，它可以使您的程序解决网络通信方面遇到的问题，并带来新的体验感知。如果您想学习更多关于 Redux-socketio 的知识或要使用它进行实时通信，可以尝试这里ist 代码示例或访问 npmjs.com。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600568d681e8991b448e4971