npm 包 prmq 使用教程

简介

prmq 是一个方便前端开发者在项目中使用消息队列功能的 npm 包。它基于 pubsub-js 开发而成,增加了消息可靠性保证,支持在一个浏览器窗口或者同域名下多个窗口之间共享消息,以及消息处理函数的自动化注销等功能。

安装

该包可以使用 npm 安装:

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

使用方法

首先引入 prmq:

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

订阅和发布消息

使用 prmq 的最基本功能是订阅和发布消息。订阅消息可以有不同的主题,一个主题可以有多个消息订阅者,当有消息发布时,所有订阅了该主题的消息处理函数将会被调用。

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

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

执行上面的代码,可以看到控制台输出了 '收到一条新闻:这是一条新闻'

取消订阅消息

当一个组件销毁时,需要取消它对消息的订阅。prmq 提供了自动注销订阅的功能,只需要在订阅消息时将返回的订阅记录保存下来,在组件销毁时调用保存下来的注销函数即可取消订阅。

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

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

单个对象多个订阅者

在一个场景中,一个对象可能会被多个组件所订阅,使用普通的订阅方式需要为每个组件单独进行订阅注册。而 prmq 提供了 subscribeObj 方法,可以自动为一个对象的多个属性注册消息订阅。

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

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

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

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

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

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

执行上面的代码,可以看到控制台输出了 '新的消息列表:[ '这是一条新闻' ]'

进阶功能

除了基本的订阅和发布消息外,prmq 还提供了进阶的功能,包括消息可靠性保证、多窗口共享消息等。

消息可靠性保证

在消息发布时,prmq 默认是不会对该消息进行缓存或重复发送的,这在某些场景下可能会导致系统不稳定。因此 prmq 提供了消息保障的功能,可以确保收到的消息列表完整无误。

使用消息保障的方法是,在发布消息时传入第三个参数,它是一个用来基于消息内容生成 hash 值的函数。prmq 会根据生成的 hash 值来判断该消息是否已经收到,并作出相应的处理。

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

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

上面的代码中,第二次发布的消息是一条已经发布过的消息,但由于传入了 hash 函数,prmq 在 3 秒钟内只会输出一次 '收到一条新闻:这是一条新闻',而不会输出 '收到一条新闻:这是另一条新闻'

多窗口共享消息

在某些场景下,一个站点可能会有多个窗口打开同一个页面,这时需要在这些窗口之间共享消息。在使用 prmq 的场景中,一个窗口的环境和上下文信息与另一个窗口有区别,因此要实现多窗口共享消息,需要引入一个消息传递中心,即一个代理页面,所有窗口向它进行消息发布和订阅。

具体的使用流程示例:

在代理页面中进行消息中转:

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

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

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

在项目的各个窗口中订阅和发布消息:

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

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

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

需要注意的是,多窗口共享消息时依赖于代理页面,代理页面打开和关闭会影响所有窗口的消息传播,因此在使用时需注意处理。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005694981e8991b448e4c95


猜你喜欢

  • npm 包 stylelint-config-hostelworld 使用教程

    前言 在前端开发中,代码规范是非常重要的一环。而 stylelint 是一个非常流行的 CSS 代码规范检查工具。而在使用 stylelint 时,我们可以通过使用预设配置来方便自己的规范代码风格。

    3 年前
  • npm 包 @avocadojs/cli 使用教程

    前言 如今,随着前端技术的不断发展,Node.js 已经成为了前端领域里不可或缺的一部分。而 npm 就是 Node.js 最重要的包管理器之一,它使得我们可以方便地管理和使用第三方库、工具与组件。

    3 年前
  • npm 包 jspdf-with-lib-pass 使用教程

    前言 在 Web 开发过程中,常常需要在前端实现 PDF 导出功能。而 jspdf-with-lib-pass 是一个非常实用的 npm 包,可以帮助我们快速生成 PDF 文件。

    3 年前
  • npm 包 extract-npm-package-config 使用教程

    前言 随着前端技术的不断发展,npm 包的使用已经成为了前端开发不可或缺的一部分。但是,有时候我们需要获取某个 npm 包中的配置信息。虽然可以手动查看 npm 包中的 package.json 文件...

    3 年前
  • npm 包 laravel-mix-cli 使用教程

    前言 在前端开发中,前置工具的使用是必不可少的,而 laravel-mix-cli 是一个强大的前置工具,它是基于 webpack 的且内置多种实用功能,可以大大提升我们的开发效率。

    3 年前
  • NPM 包 Krakn 使用教程

    Krakn 是一款 JavaScript 库,可以用于在 Web 应用程序中生成流体页面布局。这个库可以轻松地为 Web 应用程序添加动态的、基于流体网格的布局效果。

    3 年前
  • npm 包 number-pairings 使用教程

    简介 npm 是前端开发中使用得非常广泛的包管理工具,它提供了许多实用的功能,例如安装、卸载、更新、搜索、发布等。而 number-pairings 就是一款非常实用的 npm 包,它可以自动生成指定...

    3 年前
  • npm 包 uniconvert 使用教程

    在前端开发中,我们经常需要将字符串中的 Unicode 转换成对应的字符。这时候,我们可以使用 uniconvert 这个 npm 包,它可以很方便地完成这个转换。

    3 年前
  • npm 包 rsuite-affix 使用教程

    什么是 rsuite-affix rsuite-affix 是一款前端的 npm 包,可以帮助开发者实现页面滚动时位置固定的效果,常见于网页的导航栏、搜索框等元素。

    3 年前
  • npm 包 krakn-js 使用教程

    什么是 krakn-js krakn-js 是一款用于前端项目开发的 npm 包,它提供了一系列的工具和方法,方便我们进行前端开发。具体功能如下: 全局错误捕获:我们可以使用 krakn-js 来捕...

    3 年前
  • npm 包 react-byverdu 使用教程

    简介 react-byverdu 是一个基于 React 的 UI 组件库,提供了多种常用组件和功能。该库的作者是 Byverdu,其官方网站地址为:https://byverdu.github.io...

    3 年前
  • npm 包 tanmen-test-react-native 使用教程

    介绍 npm 是一个包管理器,用于在前端开发中安装并管理依赖项。tanmen-test-react-native 是一个基于 React Native 框架开发的 npm 包,用于测试 React N...

    3 年前
  • npm包angular5-rest使用教程

    在Web开发中,前端和后端之间的数据通信是一个非常重要的环节。而Angular5-rest正是一个非常优秀的npm包,它能够让前端直接和后端进行数据交互,大大降低了开发的难度和工作负担。

    3 年前
  • npm 包 electron-audio-eq 使用教程

    在基于 Electron 的前端应用中,音频处理是一个非常重要的方面。electron-audio-eq 是一个 npm 包,可以帮助我们在 Electron 应用中实现音频的均衡和滤波等效果。

    3 年前
  • npm 包 @ng-nice/mdbootstrap 使用教程

    前言 在开发前端项目时,UI 层面的实现是一个必不可少的部分。而要使 UI 层面的实现更具有美感、可读性和可复用性,使用 Bootstrap 是一个不错的选择。不过,在 Angular 环境中,使用原...

    3 年前
  • npm 包 homebridge-epson-projector 使用教程

    在智能家居设备已经越来越成为我们日常生活的一部分的今天,其对于技术人员的需求也是越来越高。Homebridge,它是一个 Node.js 服务器,可以将设备转换为 HomeKit 认可的配件,进而让你...

    3 年前
  • npm 包 rsuite-timeline 使用教程

    简介 npm 包 rsuite-timeline 是一个基于 React 的时间轴组件,提供了简单易用的 API,可以快速创建自定义的时间轴。 安装 使用 npm 进行安装: --- ------- ...

    3 年前
  • npm 包 ea-json 使用教程

    在前端开发中,我们经常需要将 JavaScript 对象转换成 JSON 字符串,或者将 JSON 字符串转换成 JavaScript 对象。为了方便地完成这个操作,我们可以使用 npm 包 ea-j...

    3 年前
  • npm 包 nocms-express-correlation-id 使用教程

    在现代的 Web 开发中,Node.js 是非常流行的一种技术。除了 Node.js 本身,NPM 是 Node.js 的生态系统中非常重要的一部分。我们可以通过 NPM 安装各种基于 Node.js...

    3 年前
  • npm 包 angular5-social-login 使用教程

    介绍 社交登录已经成为了现代网站的标配,本文将介绍使用 Angular5-Social-Login 包来实现社交登录。 安装 --- ------- --------------------- ---...

    3 年前

相关推荐

    暂无文章