前言
随着前端技术的不断发展，越来越多的开发者开始使用 WebSocket 技术来构建实时 Web 应用。而在使用 WebSocket 技术的过程中，STOMP 协议则成为了大家广泛使用的一种协议。在 Angular 中，@stomp/ng2-stompjs-do-not-use 便成为了一个非常好用的 STOMP 协议框架。本文将为大家介绍如何使用该 npm 包。
安装
在使用 @stomp/ng2-stompjs-do-not-use 之前，我们需要先安装依赖包 @stomp/stompjs 和 rxjs，安装方法如下：
npm install @stomp/stompjs rxjs --save
然后再安装 @stomp/ng2-stompjs-do-not-use：
npm install @stomp/ng2-stompjs-do-not-use --save
基本使用
在使用 @stomp/ng2-stompjs-do-not-use 之前，我们需要先引入该库：
import { Injectable } from '@angular/core';
import { Client, Message } from '@stomp/stompjs';
import { Observable, Subject } from 'rxjs';
import { publishReplay, refCount } from 'rxjs/operators';
import { StompConfig, StompService } from '@stomp/ng2-stompjs-do-not-use';接下来，我们可以开始使用 @stomp/ng2-stompjs-do-not-use 了。首先，我们需要创建一个 stomp 配置对象：
const stompConfig: StompConfig = {
url: `ws://localhost:8080/myStompEndpoint`,
headers: {},
heartbeat_in: 0,
heartbeat_out: 20000,
reconnect_delay: 5000,
debug: true
};上述代码中，我们定义了 STOMP 消息代理的 url 地址以及其他配置参数。
然后，我们可以在应用的组件中使用该类库，示例代码如下：
-- -------------------- ---- -------
-------------
------ ----- ------------------ -
------- ------------- -------------
------- ------------- -------------------
------- ------------ -------
------- ---------- --------------------
------------------------- ------------- -
----------------- - -------------
----------------- - ----------------------------------------------
------------------------------------ ------- -- -
---------------- - -------
-------------- - ---------------------------------------------
---
-
------ ------------- -------- ---- -
-- ----------------- --- --------- -- --------------------------- -
-------------------------- ------------ ------------- ----- ------- ---
-
-
------ -------------- ------------------- -
------ ------------------------------------- ------------
-
-在上述代码中，我们使用了该类库提供的 initAndConnect() 函数初始化 STOMP 客户端，然后通过 subscribe() 函数监听消息主题，以及使用 publish() 函数向消息主题发送消息。
另外，我们还实现了一个 getMessages() 函数，它将 RXJS 操作符 publishReplay(1) 和 refCount() 结合使用，以达到缓存已订阅的消息，同时避免多次进行订阅操作。在实际应用中，我们只需要调用该函数，便可获取消息主题的实时数据。
结语
本文为大家介绍了 @stomp/ng2-stompjs-do-not-use 的使用方法，希望能对大家在实际项目中使用 WebSocket 技术进行实时推送提供帮助。当然，该类库还有更丰富的操作和函数可以使用，更多详细内容请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aab81e8991b448d83b1