vue 使用stomp链接rabbitmq

前置条件 后端环境已配好rabbitmq

后端环境:
rabbtmq搭建不再描述。
截图如下：

前端环境

1.运行 安装stompjs命令

npm install stompjs

2.创建sysconstant.js.

/**
 * 配置文件，记录系统中固定的参数
 */
//注意：大坑,地址要对应后端rabbitmq中的procol的http/web-stomp 的端口
export const MQTT_SERVICE = "ws://192.168.1.101:15674/ws"; // mqtt服务地址
export const MQTT_USERNAME = "admin"; // mqtt连接用户名
export const MQTT_PASSWORD = "password"; // mqtt连接密码

3.Vue组件内容：

script:

import Stomp from "stompjs";
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
} from "../assets/js/sysconstant";

data:

// 客户端
client: Stomp.client(MQTT_SERVICE),

methods:

    // mqtt连接成功后
    onConnected: function (frame) {
      console.log("Connected: " + frame);
//注意：大坑,主题前要加/topic.
      var topic = "/topic/abc";
      // ---订阅频道
      this.client.subscribe(topic, this.responseCallback, this.onFailed);
    },
    // 连接失败
    onFailed: function (frame) {
      console.log("Failed: " + frame);
    },
    //  连接对应topic 返回函数
    responseCallback: function (frame) {
      this.currentControlName = responseCallback;
      console.log("responseCallback msg=>" + frame.body);
      // ---接收消息
    },
    // 进行连接
    connect: function () {
      // ---初始化mqtt客户端，并连接mqtt服务
      var clientid = "mqttjs_" + Math.random().toString(16).substring(2, 8);
      var headers = {
        login: MQTT_USERNAME,//登录账号
        passcode: MQTT_PASSWORD,//密码
        "client-id": clientid,// 客户id
        // additional header
      };
      this.client.connect(headers, this.onConnected, this.onFailed);
    },

最后在onMounted 周期函数里 运行 this.connect() 即可，