在前端开发中，我们经常需要实现实时性强的交互功能，例如聊天室、提醒、通知等。而实现这些功能需要使用 WebSocket 技术，而这个技术本身还需要使用一些库来实现。在本文中，我们将介绍一款 npm 包——pusher-redux-observable，它可以使用 WebSocket 实现实时性强的交互功能。下面我们将详细讲解它的使用方法。
什么是 pusher-redux-observable？
pusher-redux-observable 是一个封装了 Pusher 的 Redux Observable 的库，旨在使用 RxJS 创建一个可以订阅 Pusher WebSocket 事件和处理 Redux Action 的 middleware。pusher-redux-observable 依赖于 Redux、Redux Observable 和 Pusher 官方客户端库。它可以帮助我们轻松地在 React、Angular、Vue 等框架中使用 WebSocket 技术，实现实时性强的交互功能。
如何安装 pusher-redux-observable？
pusher-redux-observable 可以通过 npm 安装，具体方法如下：
npm install pusher-redux-observable --save
接着，我们需要在项目中引入以下依赖：
npm install redux redux-observable rxjs pusher-js --save
如何使用 pusher-redux-observable？
我们需要先在 Pusher 帐户中创建一个应用，并在客户端加载 Pusher 客户端库。
在 Redux 的 createStore 中添加 middleware：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ - -------------------- - ---- ------------------
------ - ---------------- - ---- -------------------------
------ ----------- ---- ------------
------ -------- ---- ---------
------ ------ ---- -----------
----- ------ - --- ----------------- -
-------- --------------
---------- ----
---
----- ---------------------- - -
-------
--------- --------------
-
----- -------------- - ----------------------
----- ----- - ------------
------------
----------------
---------------
----------------------------------------
-
-
----------------------------在我们的 Redux Middleware 中，使用了 pusher-redux-observable 提供的 pusherMiddleware。
-- -------------------- ---- ------- ----- ---------------------- - - ------- -- ------ -- --------- -------------- -- ----- - ---------------- --------------- ---------------------------------------- -- ----------------------- ---------- -
接着，在 Redux Epics 中使用 observable 来处理推送的数据。
-- -------------------- ---- -------
------ - ---------- - ---- ------
------ - -------------------------------- - ---- -------------------------
-- ---
----- ------------------------- - ---------------------------------------- --------------
----- ------------------- - -------------------------- -- -
------------------------------------------- -- -
------------------------ ---- -- -
-------------------
--
---
---
----- ---- - --------- --
------------------------------
---------------- --
---------------------------- -- --
----- --------------
-------- ----
---
--
-- ---pusherSubscribeObservableFactory 接收两个参数：pusher 对象和用于订阅的频道名称。同时我们在 myChannelObservable 中创建一个 Observable，用于监听 my-event 的推送数据。
上述代码中，我们在 epic 中使用 RxJS 的 mergeMap 运算符连接两个 Observable 来处理业务逻辑。具体操作是，当 Redux 中 action 触发时，从 myChannelObservable 中获取数据，生成 type 为 MY_EVENT_TYPE 的 Action，并将数据 payload 添加到 Action 中，然后返回给 Redux。
此时，我们就完成了 pusher-redux-observable 的配置。
示例代码
下面是一个简单的使用示例，我们监听一个频道上的所有事件，并通过 Redux 触发 Action 来处理数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
----- -------- ------- --------- -
------------------ -
------------
---------- - -
-------- --
-
-
------------ - ------- -- -
--------------- -------- ------------------ --
-
------------ - --- -- -
------------------
----- - -------- - - ----------
---------- ----- --------------- -------- ------------------ -- -- -- ----- ------
--------------- -------- -- --
-
-------- -
----- - -------- - - ----------
------ -
-----
----
----------------------- ------ -- -
------ --- --------------------------
---
-----
----- -----------------------------
-----------------------
------ ----------- -------------------------- ---------------------------- --
------- ---------------------------
-------
------
-
-
-
-- --- ----- --------
----- --------------- - ------- -- -
------ -
--------- --------------
-
-
------ ------- ----------------------------------在 Redux 的 Action 中监听 Pusher 的频道。
-- -------------------- ---- -------
------ - ---------- - ---- ------
------ - -------------------------------- - ---- -------------------------
----- ------------------------- - ---------------------------------------- -------------
----- ------------------- - -------------------------- -- -
------------------------------------------- -- -
--------------------- -- -
------------------- -- ----------------------
--
--
--
------ ----- --------- --------- --
---------------------------- -- --
----- ------------------
-------- ------------ -- --------
---以上就是使用 pusher-redux-observable 的完整流程，我们可以使用它来方便地在项目中使用 WebSocket 技术，实现实时性强的交互功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa581e8991b448d81fa