npm 包 @stomp/ng-stomp 使用教程

简介

@stomp/ng-stomp 是一个基于 Angular 的 STOMP 客户端库，用于实现与消息代理之间的实时双向通信，如 Apache ActiveMQ等。

STOMP 消息协议是一种简单的、开放式、文本协议，其能够简单地将消息中间件的功能映射到其他消息服务（例如 RabbitMQ）。

@stomp/ng-stomp 提供了许多可配置的特性，其中包括：

  • 支持实时连接和断开连接
  • 能够发送和接收消息
  • 可以配置订阅时的ACK
  • 支持心跳功能
  • 能够在 WebSocket 连接和/或客户端和/或服务端传输协议之间进行自动重新连接等。

安装

你可以通过 npm 来安装 @stomp/ng-stomp：

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

API

@stomp/ng-stomp 提供了一组可以在应用程序中使用的 API。

在你的代码中，你需要导入并注入 StompService：

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

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

接下来，你可以使用 @stomp/ng-stomp 的 API，例如：

createConnection

createConnection 是创建一个新的 WebSocket 连接的方法。它带有一个可选的 URL 参数。

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

onConnect

在如上述的 createConnection 返回的 connection 对象上，你可以使用 onConnect 来监听在 STOMP 消息代理上的连接成功事件。

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

subscribe

你可以使用 subscribe 方法来订阅消息代理上的某个目标（如主题或队列），以便接收新消息。subscribe 方法接受三个参数：

  1. destination: 必需参数，表示要订阅的目标。
  2. headers: 可选参数，表示订阅时的其他头信息。
  3. callback: 必需参数，用于在成功接收到消息时进行处理。
----- --- - ---------------------------
----- ---------- - ----------------------------------------

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

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

send

send 方法用于向消息代理发送消息。它接受三个参数：

  1. destination: 必需参数，表示要发送的目标。
  2. headers: 可选参数，表示发送消息的其他头信息。
  3. body: 必需参数，表示要发送的消息体。
----- ------- - -
  ---------------- ------- -------
  --------------- ------------------
--
----- ---- - -
  ------- ----- -----
  ------ --
--

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

onWebSocketClose

你可以使用 onWebSocketClose 方法来监听 WebSocket 连接被强制关闭的事件。

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

示例代码

如下是一个简单的示例代码，用于基于 @stomp/ng-stomp ，向消息代理发送和接收消息：

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

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

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

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

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

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

以上就是使用 @stomp/ng-stomp 的一些基本方法和示例代码。对于更详细的 API 文档和示例，请参考该 npm 包的官方文档。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566c281e8991b448e31d7

阅读全文

猜你喜欢

  • npm 包 bredon-plugin-unit 使用教程

    前言 在前端开发中，样式的单位选择是一个十分重要的问题，常见的单位有 px、em、rem 等，不同的选择会影响页面的渲染效果以及性能表现。使用 npm 包 bredon-plugin-unit 可以帮...

    3 年前
  • npm包 postcss-bredon-validate使用教程

    介绍 在前端开发中，postcss是一种非常受欢迎的工具，它可以对CSS进行预处理，增强CSS的功能。其中，postcss-bredon-validate是一款非常实用的npm包，它可以帮助你在CSS...

    3 年前
  • npm 包 stump-sortable 使用教程

    在前端开发中，我们经常需要实现对某些元素进行排序的需求，例如拖拽进行排序。在实现这样的需求时，我们可以使用一些现成的工具库来提高开发效率。其中一款较为优秀的库就是 stump-sortable，它是一...

    3 年前
  • npm 包 info-glass 使用教程

    介绍 在前端开发中，使用一些第三方库或插件可帮助我们提高开发效率，以及增加项目的功能性和可维护性。npm 是一个很好的 JavaScript 包管理工具，提供了多个前端开发所需的包。

    3 年前
  • npm 包 testraquelpack 使用教程

    简介 testraquelpack 是一个用于快速搭建基于 React、Redux、Webpack 等前端技术栈的工程项目的工具包，它能够帮助开发者节省不少时间和精力。

    3 年前
  • npm 包 web-termjs 使用教程

    前言 在前端开发领域中，可以使用一些工具来提高我们的效率和开发体验。其中，npm 包是前端开发过程中不可或缺的一部分。本文将介绍一个非常实用的 npm 包——web-termjs，该包可以让我们在浏览...

    3 年前
  • npm 包 akvagrid 使用教程

    简介 akvagrid 是一个基于 React 的表格组件，支持自定义列、排序、筛选、分页和单/多选等功能，灵活易用。在前端开发中，表格是一个非常常见的组件。使用 akvagrid 可以大大提升表格的...

    3 年前
  • npm 包 vusion-vue-template-compiler 使用教程

    在前端开发中，我们经常会用到 Vue.js 框架和模板编译器。但运用模板编译器时会遇到一些问题，例如使用 Vue CLI 创建新项目时默认的模板编译器不支持某些特定的指令等。

    3 年前
  • NPM 包 Bredon 使用教程

    什么是 Bredon？ Bredon 是一个通过编写样式来指定字符串格式的 JavaScript 库。它主要是通过一种类 CSS 的格式指定样式，并且可以进行某些格式验证，以确保特定的内容符合所需的格...

    3 年前
  • npm 包 change-branch 使用教程

    在前端开发中，经常需要使用 Git 来进行版本控制。而在 Git 中，分支(branch)是一个非常重要的概念，它能够使得开发者在不同的开发阶段之间切换，以及在团队协作中保持代码的整洁。

    3 年前
  • npm 包 empatica-e4-client 使用教程

    介绍 Empatica E4 是一款常用的生理监测设备，可监测生理信号如心率、皮肤电阻、体温等，并提供了统一的 API，方便开发者使用。 empatica-e4-client 就是一个可以帮助我们连接...

    3 年前
  • npm 包 bredon-plugin-precision 使用教程

    在前端开发中，我们经常遇到需要对 CSS 中的数值精度进行控制的情况，比如说设计稿中要求线条粗细为 1.5px，但渲染出来却是 1.4999px，这时需要对样式进行精度控制。

    3 年前
  • npm 包 ember-cli-izel-docs 使用教程

    介绍 ember-cli-izel-docs 是一个用于生成 Ember.js 应用程序文档的 npm 包。它可以生成静态 HTML 文档，帮助开发者更好地组织和展示他们的 Ember 应用程序的代码...

    3 年前
  • npm 包 bredon-types 使用教程

    npm 包 bredon-types 是一个基于 TypeScript 的 CSS 解析器和生成器。它允许您将 CSS 代码解析为 AST（抽象语法树），对 CSS 进行分析、处理和修改，并将 AST...

    3 年前
  • NPM 包 @dsoko2/gulp-webserver 使用教程

    前言 随着 Web 技术的不断发展，前端领域也越来越重要。前端开发离不开各种工具和技术支持，其中， gulp 是一种非常流行的前端构建工具之一，它可以帮助开发者完成各种构建任务，例如打包压缩、代码检查...

    3 年前
  • npm包 bredon-validate 使用教程

    介绍 bredon-validate是一个基于bredon的表单验证库，可以用于前端表单验证。它具有强大和易于使用的特点，可以快速准确地验证数据。同时，该库提供了自定义验证规则的功能，可以根据自己的需...

    3 年前
  • npm 包 force-sync 使用教程

    在前端开发中，我们经常需要使用 npm 包来进行代码开发和管理。其中，npm 包 force-sync 是一个可以帮助开发者同步两个文件夹的工具。 在本文中，我们将介绍 npm 包 force-syn...

    3 年前
  • npm 包 popoto-core 使用教程

    简介 在前端开发中，我们经常需要使用可视化图表来展示数据，而 popoto-core 是一款基于 JavaScript 和 D3.js 的图形绘制库，可以方便地帮助我们在 Web 页面中绘制出各种图表...

    3 年前
  • npm 包 vuex-shortly 使用教程

    介绍 vuex-shortly 是一个在 Vuex 基础上的状态管理工具，它可以帮助我们更加方便地管理状态，并提供了快速生成状态代码的便利。 安装 要使用 vuex-shortly，我们首先需要安装它...

    3 年前
  • Couch-pwd-updated：npm 包使用教程

    近年来，随着前端技术的飞速发展，前端工程师的工作愈发繁忙。为了提高开发效率，前端工程师们需要不断掌握新的工具、框架和技术。这篇文章将介绍一个 NPM 包——Couch-pwd-updated ，并给出...

    3 年前

相关推荐

    暂无文章