在进行前端开发时，我们常常需要与后台进行实时通讯，例如使用 WebSocket 或 SockJS。而 webstomp-client 正是一个基于 WebSocket 协议的 STOMP 客户端库，它可以帮助我们轻松地进行消息传递和订阅。本文将详细介绍 webstomp-client 的使用方法，供前端开发者参考。
安装和引入
安装 webstomp-client 很简单，只需要在命令行中输入以下命令即可：
npm install webstomp-client --save
然后，在前端代码中引入：
import { Client } from 'webstomp-client';连接服务器
使用 webstomp-client 连接服务器需要指定服务器的地址和端口号：
const client = new Client('ws://localhost:8080/my-endpoint');其中，'ws://' 表示使用 WebSocket 协议，而 'my-endpoint' 则是 STOMP 服务器中的一个端点，可以自行定义。
为了在连接时能够正确设置头部信息，我们可以使用 connect 方法，例如：
const client = new Client('ws://localhost:8080/my-endpoint');
client.connect({}, function (frame) {
// 连接成功的响应
}, function (error) {
// 连接失败的响应
});在 connect 方法中，{} 表示设置的头部信息为空。当然，我们也可以通过对象字面量来设置更多的头部信息，例如：
-- -------------------- ---- ------- ----- ------- - - ------ ---------- --------- ------------- -- ------ - ----- ------ - --- ------------------------------------------ ----------------------- -------- ------- - -- ------- -- -------- ------- - -- ------- ---
订阅与发送消息
接下来，我们就可以使用 webstomp-client 来进行消息的订阅和发送了。
使用 subscribe 方法来订阅一个主题：
const subscription = client.subscribe('/topic/my-topic', function (message) {
console.log(message.body);
});其中，'/topic/my-topic' 表示所订阅的主题，可以自行定义。当有消息时，subscribe 方法中的回调函数将会被调用，传入的参数 message 中包含消息的信息，例如消息体可以通过 message.body 获取。
如果需要取消订阅，则可以使用 unsubscribe 方法：
subscription.unsubscribe();
而发送消息则可以使用 send 方法：
const destination = '/topic/my-topic';
const body = 'Hello World!';
const headers = {
'content-type': 'text/plain',
// 其他头部信息
}
client.send(destination, body, headers);其中，destination 表示发送的目标主题，body 表示消息体，headers 表示所设置的头部信息。
断开连接
当不再需要使用 webstomp-client 时，可以使用 disconnect 方法来断开连接：
client.disconnect(function () {
// 断开连接后的响应
});示例代码
下面是一个使用 webstomp-client 进行消息订阅和发送的完整示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------
----- ------ - --- ------------------------------------------
-- -----
----- ------- - -
------ ----------
--------- ------------
-
----------------------- -------- ------- -
--------------------
-- ----
----- ------------ - ----------------------------------- -------- --------- -
--------------------------
---
-- ----
----- ----------- - ------------------
----- ---- - ------ --------
----- ------- - -
--------------- ------------
-
------------------------ ----- ---------
-- ----
------------------- -- -
---------------------------
-- ------
-- ----
------------------- -- -
-------------------------- -- -
---------------------
---
-- -------
-- -------- ------- -
------------------- - -------
---总结
本文介绍了 npm 包 webstomp-client 的使用方法，包括连接服务器、订阅与发送消息、断开连接等内容。希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde61