简介
@stomp/ng-stomp 是一个基于 Angular 的 STOMP 客户端库，用于实现与消息代理之间的实时双向通信，如 Apache ActiveMQ等。
STOMP 消息协议是一种简单的、开放式、文本协议，其能够简单地将消息中间件的功能映射到其他消息服务（例如 RabbitMQ）。
@stomp/ng-stomp 提供了许多可配置的特性，其中包括：
- 支持实时连接和断开连接
- 能够发送和接收消息
- 可以配置订阅时的ACK
- 支持心跳功能
- 能够在 WebSocket 连接和/或客户端和/或服务端传输协议之间进行自动重新连接等。
安装
你可以通过 npm 来安装 @stomp/ng-stomp：
npm install --save @stomp/ng-stomp
API
@stomp/ng-stomp 提供了一组可以在应用程序中使用的 API。
在你的代码中，你需要导入并注入 StompService：
import { StompService } from '@stomp/ng-stomp';
// 在组件构造函数中注入 StompService
constructor(private stompService: StompService) {
// Your code goes here
}接下来，你可以使用 @stomp/ng-stomp 的 API，例如：
createConnection
createConnection 是创建一个新的 WebSocket 连接的方法。它带有一个可选的 URL 参数。
const url = 'ws://localhost:8080/myws'; const connection = this.stompService.createConnection(url);
onConnect
在如上述的 createConnection 返回的 connection 对象上，你可以使用 onConnect 来监听在 STOMP 消息代理上的连接成功事件。
const url = 'ws://localhost:8080/myws';
const connection = this.stompService.createConnection(url);
connection.onConnect = () => {
console.log('Connected successfully!');
}subscribe
你可以使用 subscribe 方法来订阅消息代理上的某个目标（如主题或队列），以便接收新消息。subscribe 方法接受三个参数：
destination: 必需参数，表示要订阅的目标。headers: 可选参数，表示订阅时的其他头信息。callback: 必需参数，用于在成功接收到消息时进行处理。
-- -------------------- ---- -------
----- --- - ---------------------------
----- ---------- - ----------------------------------------
----- ------- - -
---------------- ------- -------
------------------ -------
--
---------------------------------------------- -------- --------- ------------- -- -
---------------- ---------- ---------
---send
send 方法用于向消息代理发送消息。它接受三个参数：
destination: 必需参数，表示要发送的目标。headers: 可选参数，表示发送消息的其他头信息。body: 必需参数，表示要发送的消息体。
-- -------------------- ---- ------- ----- ------- - - ---------------- ------- ------- --------------- ------------------ -- ----- ---- - - ------- ----- ----- ------ -- -- ----------------------------------------- -------- ----------------------
onWebSocketClose
你可以使用 onWebSocketClose 方法来监听 WebSocket 连接被强制关闭的事件。
this.stompService.onWebSocketClose(() => {
console.log('WebSocket closed!');
});示例代码
如下是一个简单的示例代码，用于基于 @stomp/ng-stomp ，向消息代理发送和接收消息：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------- ------------ - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ ---------- ------ -
------------------- ------------- ------------- --
----------- ---- -
----- --- - ---------------------------
----- ---------- - ----------------------------------------
-------------------- - -- -- -
---------------------- ----------------
----- ------- - -
---------------- ------- -------
------------------ -------
--
---------------------------------------------- -------- --------- ------------- -- -
---------------- ---------- ---------
---
----- ---- - -
------- ----- -----
------ --
--
----------------------------------------- ----- ----------------------
--
------------------------------------- -- -
---------------------- ----------
---
-
-以上就是使用 @stomp/ng-stomp 的一些基本方法和示例代码。对于更详细的 API 文档和示例，请参考该 npm 包的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c281e8991b448e31d7