npm 包 pusher-redux-observable 使用教程

在前端开发中，我们经常需要实现实时性强的交互功能，例如聊天室、提醒、通知等。而实现这些功能需要使用 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 安装，具体方法如下：

--- ------- ----------------------- ------

接着，我们需要在项目中引入以下依赖：

--- ------- ----- ---------------- ---- --------- ------

如何使用 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

阅读全文

猜你喜欢

  • npm 包 qiq.js 使用教程

    概述 qiq.js 是一个轻量级的前端 JavaScript 库，它提供了一些方便的函数和工具，可以帮助开发者更容易地处理一些常见的任务。 安装 你可以使用 npm 来安装 qiq.js： --- -...

    2 年前
  • NPM 包 @glezsosa/video 使用教程

    当今 Web 开发行业发展迅速，前端技术也越来越成熟，各种 JavaScript 库不断涌现。而 NPM 作为 Node.js 的包管理器，也成为前端工程师必不可少的一部分。

    2 年前
  • npm 包 jquery-node-dragger 使用教程

    介绍 jquery-node-dragger 是一个基于 jQuery 的 npm 包，它提供了一个便捷的拖拽功能。它可以很方便地让你实现任何元素的拖拽效果，例如图像、文本框、按钮等。

    2 年前
  • npm 包 retina-dom-to-image 使用教程

    介绍 retina-dom-to-image 是一款使用 TypeScript 写成的 npm 包，用于将 DOM 元素转换成图片。 它支持图像质量的配置，可以将图片保存为 PNG 或 JPEG 格式...

    2 年前
  • npm 包 qiqz 使用教程

    前言 在前端开发中，我们经常需要进行数据的验证、加密、解密等操作。而 qiqz 是一个专门为 JavaScript 开发者提供的强大的工具库，可以帮助我们轻松地处理这些日常开发中常见的操作。

    2 年前
  • npm 包 react-native-welcome-screen 使用教程

    在现代前端开发中，构建一个用户友好的应用程序至关重要。而欢迎界面是吸引用户的第一个元素。为了更好地实现这一功能，许多开发人员使用 npm 程序包。其中之一是 react-native-welcome-...

    2 年前
  • npm 包 speedyjs-benchmark 使用教程

    在前端开发中，性能一直是一个重要的话题。为了优化前端应用程序的性能，我们需要运行各种性能测试并进行分析，这些测试涉及许多因素，例如算法的选择，代码的组织方式以及框架的选择等。

    2 年前
  • npm 包 @rokt33r/typed-immutable-record 使用教程

    在前端开发中，我们经常需要使用不可变数据结构。这些数据结构在使用时能够带来很多好处，例如性能优化、代码简化、代码稳定性等。@rokt33r/typed-immutable-record 是一个用 Ty...

    2 年前
  • npm 包 kushki-sns-gateway 使用教程

    1. 简介 kushki-sns-gateway 是一款基于 AWS SNS（Simple Notification Service）的轻量级 Node.js 库，提供了一种简单、高效的消息服务，可以...

    2 年前
  • npm 包 hfill 使用教程

    在前端开发中，我们经常会遇到需要将一个容器横向填充满的情况。这时，使用 CSS 中的 justify-content: space-between 或 flex-grow 可以实现横向填充满，但是代码...

    2 年前
  • npm 包 ltfill 使用教程

    前言 随着前端技术的不断发展，前端开发人员需要掌握更多的工具和技术，以便更好地完成项目开发。而 npm 是前端开发中不可或缺的工具之一，它为前端开发人员提供了丰富的开源包和模块。

    2 年前
  • npm 包 chromehtmltopdf 使用教程

    npm 包 chromehtmltopdf 使用教程 在前端开发中，PDF 文件的生成是一个经常遇到的问题。而 chromehtmltopdf 是一款基于 Chrome Headless 的 npm ...

    2 年前
  • npm 包 graphql-acl 使用教程

    GraphQL是目前非常流行的API查询语言和运行环境，它为构建服务化的应用程序提供了极大的便利性。尽管GraphQL为我们提供了强大的查询功能，但对于许多开发人员而言，它可能会带来一些麻烦，例如如何...

    2 年前
  • npm包ddp-micro的使用教程

    前言 在前端开发中，npm包是不可或缺的一部分。这些包可以大大提高开发效率，减少代码量，增加代码可读性，同时也可以提高代码的复用性。在本文中，我们将介绍一款npm包——ddp-micro，并详细讲解如...

    2 年前
  • npm 包 jquery-hints 使用教程

    在前端开发中，我们经常需要使用 jQuery 这个 JavaScript 库来操作文档对象模型（DOM）。而 jQuery-hints，则是基于 jQuery 的一个插件，用于给输入框添加提示信息。

    2 年前
  • npm 包 koa2-session-store 使用教程

    在前端开发过程中，会经常使用到 koa2 这个 Node.js 的 web 框架。而 koa2-session-store 是一个可以帮助我们管理 session 的 npm 包，使用起来非常方便。

    2 年前
  • npm 包 ng-harmony-util 使用教程

    前言 在前端开发中，我们经常需要使用各种工具库来提升开发效率和代码质量。npm 作为新一代的 JS 包管理工具，已成为前端领域中最流行的工具之一。而 ng-harmony-util 是一个基于 Ang...

    2 年前
  • NPM 包 renaissance-spa 使用教程

    renaissance-spa 是一款针对现代 Web 应用的极简前端单页应用（SPA）框架，它专注于提升前端应用的性能和用户体验。renaissance-spa 以其简洁、易用和高效受到了广泛的欢迎...

    2 年前
  • npm 包 rocketleaguesam-api-client 使用教程

    简介 rocketleaguesam-api-client 是一个轻量级的 npm 包，为前端开发者提供了对 Rocket League Stats API 的访问和使用的接口。

    2 年前
  • npm 包 stemcell 使用教程

    在前端工程化过程中，我们经常会使用各种各样的 npm 包来帮助我们完成开发任务。而在这些 npm 包中，stemcell 也是一个非常实用和强大的工具包。它提供了一组现代的 JavaScript 开发...

    2 年前

相关推荐

    暂无文章