前言
ng2-stomp-service 是一个基于 Angular2+ 的 npm 包，它提供了使用 Stomp 协议连接 WebSocket 服务端的基本能力，使得 Angular 应用能够方便地与服务端进行实时通信。
本文将介绍如何使用 ng2-stomp-service 来实现 WebSocket 在 Angular 中的连接与发送消息。
安装 ng2-stomp-service
使用 npm 命令进行安装：
npm install ng2-stomp-service --save
在你的 AppModule 中或者你想要使用这个服务的 Module 中引入 ng2-stomp-service，例如在 AppModule 中引入：
import { Ng2StompServiceModule } from 'ng2-stomp-service';
@NgModule({
imports: [ Ng2StompServiceModule ],
// ...
})
export class AppModule {}连接 WebSocket
在使用 websocket 之前，首先需要通过 ng2-stomp-service 来创建 WebSocket 的连接。在你的源代码中引入 Ng2StompService 服务（示例仅展示如何创建连接，尝试连接本地地址）：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------------------
------------
-- ---
--
------ ----- ---------------- ---------- ------ -
------------------- ---------------- ---------------- - -
---------- -
----- ------ - -
---- ----------------------------------
--
---------------------------------------------
-------- -- -
---------------------- -- -------------
--
------------ -- -
-----------------
---
-
-发送和接收消息
建立好 WebSocket 连接之后，我们就可以开始发送和接收消息了。为了接收来自服务器的消息，我们需要注册一个回调函数，然后在回调函数中处理收到的消息。调用 Ng2StompService 的 subscribe() 方法来订阅一个主题，并在回调函数中处理消息的内容。尝试订阅以下示例代码中定义的 /topic/example 主题：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------- - ---- --------------------
------------
-- ---
--
------ ----- ---------------- ---------- ------ -
------- -------------------- - ---
------------------- ---------------- ---------------- - -
---------- -
----- ------ - -
---- ----------------------------------
--
---------------------------------------------
-------- -- -
---------------------- -- -------------
-------------------------------
--
------------ -- -
-----------------
---
-
------- ------------------------- -
------------------------------------------------ --------- -- -
--------------------- ------- ---- ---- ------------------
---------------------------------------------
---
-
------- ------------- -
----- ------- - -
----- ------- -----------
--
-------------------------------------------- -------------------------
-
-在订阅之后，如果收到了 /topic/example 主题的消息，就会调用 subscribe() 的回调函数。在该回调函数中，我们将收到的消息体存储在 exampleTopicMessages 数组中。
现在，我们可以通过调用 sendMessage() 方法来发布一些消息到 /app/example 主题上。在上面的代码示例中，我们向主题发布一个包含 {"text": "Hello, WebSocket!"} 的 JSON 消息。你可以尝试一下，在控制台中会显示 "Received message with body Hello, WebSocket!" 的日志信息。
总结
现在你已经掌握了在 Angular2+ 应用中使用 WebSocket 以及 ng2-stomp-service 框架的基本操作。通过 ng2-stomp-service 我们可以轻松地实现在 Angular2+ 应用中与 WebSocket 进行实时通信。在实际项目中，我们可以将这种技术应用于例如真人在线游戏、即时聊天等各种实时应用领域。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60945