MQTT-Vue整合

已于 2025-05-26 23:27:05 修改
阅读量641 收藏 6
点赞数 9
分类专栏： MQTT 文章标签： mqtt vue 前端调用MQTT 订阅主题 发布消息 接收消息
于 2025-05-26 23:25:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012516524/article/details/148241302
版权

Vue整合

依赖环境

  • nodejs 版本 >= 18
  • 安装 element plus
npm install element-plus
  • 安装 mqtt
npm install mqtt

初始化Vue项目

  • 使用 vite 创建项目
  1. 执行命令 npm create vite@latest
  2. 输入项目名称 vue-mqtt-demo

在这里插入图片描述

MQTT连接

连接组件代码

components/MqttDemo.vue

<script setup>
import { ref } from "vue";
import mqtt from "mqtt";

// 消息质量取值数组
const qosList = [0, 1, 2];


/* -------建立和关闭连接-------*/
// 定义链接信息对象
const connectionInfo = ref({
  protocol: 'ws',
  host: "192.168.40.128",
  port: 8083,
  clientId: "mqtt_vue_" + Math.random().toString(16).substring(2, 8),
  username: "admin",
  password: "admin123456",
  clean: true,
  connectTimeout: 10 * 1000, // 单位：ms
  reconnectPeriod: 4000, // 单位：ms
})

// 创建链接对象
const client = ref({})
// 链接初始化相关数据
const clientInitData = ref({      
  connnected: false
})

// 建立连接事件处理函数
const createConnection = () => {

  const { protocol, host, port , ...options } = connectionInfo.value;
  const connectUrl = `${protocol}://${host}:${port}/mqtt`;
  console.log(connectUrl)
  // 建立连接
  client.value = mqtt.connect(connectUrl , options);   
  clientInitData.value.connnected = true ;
  console.info("create connection successful...")

}

// 关闭连接
const closeConnection = () => {

  // 如果设置为true：立即关闭套接字，不发送MQTT DISCONNECT包。
  // 如果设置为false（默认值）：先发送MQTT DISCONNECT包给代理，然后关闭套接字
  client.value.end(false , () => {
    clientInitData.value.connnected = false;
    console.info("close connection successful...")
  })
}
</script>

<template>
  <div class="mqtt-demo">
    <el-card>
      <h1>配置信息</h1>
      <el-form label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="protocol" label="选择协议">
              <el-select v-model="connectionInfo.protocol">
                <el-option label="ws://" value="ws"></el-option>
                <el-option label="wss://" value="wss"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="host" label="主机地址">
              <el-input v-model="connectionInfo.host"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="port" label="端口号">
              <el-input type="number" placeholder="8083/8084" v-model="connectionInfo.port"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="clientId" label="客户端ID">
              <el-input v-model="connectionInfo.clientId"> </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="username" label="用户名">
              <el-input v-model="connectionInfo.username"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="password" label="密码">
              <el-input v-model="connectionInfo.password"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-button type="primary" @click="createConnection" v-bind:disabled="clientInitData.connnected">建立连接</el-button>
            <el-button type="danger" @click="closeConnection" v-bind:disabled="!clientInitData.connnected">断开连接</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.mqtt-demo {
  max-width: 1200px;
  margin: 32px auto 0 auto;
}

h1 {
  font-size: 16px;
  margin-top: 0;
}

.el-card {
  margin-bottom: 32px;
}
.el-card__body {
  padding: 24px;
}

.el-select {
  width: 100%;
}

.text-right {
  text-align: right;
}

.sub-btn {
  margin-top: 30px;
}
</style>

首页引入连接组件

App.vue

<template>
  <MqttDemo />
</template>

<script setup>
import MqttDemo from "./components/MqttDemo.vue";

</script>

<style></style>

运行项目

npm run dev

在这里插入图片描述

访问页面

http://localhost:5173/

在这里插入图片描述

建立连接

在这里插入图片描述

断开连接

在这里插入图片描述

MQTT订阅

订阅相关代码

components/MqttDemo.vue

  • JS 代码
// 消息质量取值数组
const qosList = [0, 1, 2];

/* -----订阅和取消订阅------ */

const receivedMessages = ref(null);
const subscriptionInfo = ref({
  // 订阅参数数据模型
  topic: "",
  qos: 0,
});
const subscriptionInitData = ref({
  // 订阅初始化数据
  subscription: false,
});

// 订阅主题的事件处理函数
const subscriptionTopicHandler = () => {
  const { topic, qos } = subscriptionInfo.value;
  console.info(qos);
  client.value.subscribe(topic, { qos }, (error, res) => {
    if (error) {
      console.info("subscribe topic error:", error);
      return;
    }
    subscriptionInitData.value.subscription = true;
    console.info("subscribe topic successful.... ");

    // 订阅成功以后，监听发送消息事件
    client.value.on("message", (topic, message) => {
      console.info("topic -----> " + topic + ", message -----> " + message);
      receivedMessages.value =
        "topic -----> " + topic + ", message -----> " + message;
    });
  });
};

// 取消订阅的事件处理函数
const unSubscriptionTopicHandler = () => {
  const { topic, qos } = subscriptionInfo.value;
  client.value.unsubscribe(topic, { qos }, (error, res) => {
    if (error) {
      console.info("unSubscriptionTopic Error:", error);
      return;
    }
    subscriptionInitData.value.subscription = false;
    console.info("unSubscriptionTopic successful.... ");
  });
};
  • HTML 页面
 <el-card>
      <h1>订阅主题</h1>
      <el-form label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="topic" label="Topic">
              <el-input v-model="subscriptionInfo.topic"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="qos" label="QoS">
              <el-select v-model="subscriptionInfo.qos">
                <el-option
                  v-for="qos in qosList"
                  :key="qos"
                  :label="qos"
                  :value="qos"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" class="sub-btn" @click="subscriptionTopicHandler"
            v-bind:disabled="subscriptionInitData.subscription">订阅主题</el-button>
            <el-button type="primary" class="sub-btn" @click="unSubscriptionTopicHandler"
            v-bind:disabled="!subscriptionInitData.subscription">取消订阅</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <h1>接收到的消息</h1>
      <el-col :span="24">
        <el-input type="textarea" :rows="3" readonly v-model="receivedMessages"></el-input>
      </el-col>
    </el-card>

运行访问

在这里插入图片描述

订阅主题

在这里插入图片描述

取消订阅

在这里插入图片描述

MQTT 发布

发布相关代码

  • JS 代码
/* ----- 发布消息 ----- */
// 定义发布消息对象
const publishInfo = ref({
  topic: '' ,
  qos: 0,
  payLoad: ''
})
    
// 发布消息的事件处理函数
const publishMsg = () => {
  const {topic , payLoad , qos } = publishInfo.value ;
  client.value.publish(topic , payLoad , { qos } , (error , res) => {
    if(error) {
      console.info("publish msg info error...." , error)
      return ;
    }
    console.info("publish msg info successful....")
  }) ;

}
  • HTML 代码
 <el-card>
      <h1>发布消息</h1>
      <el-form label-position="top">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="topic" label="Topic">
              <el-input v-model="publishInfo.topic"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="payload" label="Payload">
              <el-input v-model="publishInfo.payLoad"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="qos" label="QoS">
              <el-select v-model="publishInfo.qos">
                <el-option
                  v-for="qos in qosList"
                  :key="qos"
                  :label="qos"
                  :value="qos"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-col :span="24" class="text-right">
        <el-button type="primary" @click="publishMsg">发布消息</el-button>
      </el-col>
    </el-card>

运行访问

在这里插入图片描述

订阅主题 test

在这里插入图片描述

发送接收消息

在这里插入图片描述
点击发送后，接收消息框立马收到发布的消息

RuoYi-Vue集成mqtt
qq_59924988的博客
01-29 405
<groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.30</version>
RuoYi-Vue分离版集成MQTT客户端，超详细版_若依集成mqtt
2401_83641491的博客
05-13 881
3、第三步需要在ruoyi-common模块下src\main\java\com\superVisualization\common\utils目录下新建MqttConfig.java文件和mqtt文件夹添加MqttPushClient.java、PushCallback.java文件。2、第二步在ruoyi-admin模块中找到application.yml文件中添加配置。1、第一步导入依赖，在ruoyi-common模块下的pom文件导入依赖。我们将代码全部集成到common模块下面。
ruoyi-vue 整合EMQX接收MQTT协议数据
qq_38382365的博客
11-30 1974
放开测试类的访问权限，在com.ruoyi.framework.config 路径下的 SecurityConfig 类中添加如下代码。sendMessage=你好啊。完成后，需要搭建客户端进行接收数据进一步对数据处理，下面介绍基于若依分离版开源框架来整合EMQX方法。如果连接不上，确认emqx是否启动成功，详细可以查看。3.新建 MqttAcceptCallback。10.新建测试类 MqttController。4.新建 MqttAcceptClient。8.新建 MqttSendCallBack。
【MQTT】VUE集成MQTT
qq_41306795的博客
10-13 2013
计划梳理MQTT集成至Java、Vue的系列文档，详见收录专栏。该示例文章，已将相关方法封装至工具类。
RuoYi-Vue分离版集成MQTT客户端，超详细版
热爱Java的小老弟
12-18 4071
RuoYi-Vue分离版集成MQTT客户端，实现客户端订阅、发送，以及MQTT的连接；超详细版 2、第二步在ruoyi-admin模块中找到application.yml文件中添加配置 3、第三步需要在ruoyi-common模块
Netty：利用netty-mqtt-client实现Mqtt消息的发布和订阅
行云
01-28 6915
利用netty-mqtt-client实现Mqtt消息的发布和订阅
RuoYi-Vue前后端分离版集成MQTT
pt
08-23 4545
RuoYi-Vue前后端分离版集成MQTT
Vue2使用mqtt
RepecTT的博客
07-08 1258
Vue2使用mqtt建立通信
mqtt在vue中的实际运用
qq_55874738的博客
01-31 1608
1、因为使用mqtt5，所以我把mqtt版本升级到了5.1.4，发现mqtt的connect导入报错，查看对应版本的源码后发现，这个方法是分块导出，代码应该为 import { connect } from 'mqtt'不同环境连接的MQTT Broker是不同的，mqtt在https的情况下需要使用的是wss协议，我们可以把不同的url、协议、用户名等等挂载到process上实现此效果。在连接成功时循环订阅此列表，并在接收消息时根据配置项调用对应方法。这个配置项居然有默认值，并且是4，需要手动去改成5！
mqtt-client-Vue.js.zip
04-23
【标题解析】：“mqtt-client-Vue.js.zip”这个标题表明我们正在处理一个关于MQTT客户端实现的项目，它是使用Vue.js框架编写的。MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/订阅模式的网络协议...
ruoyi-admin和ruoyi-vue3笔记-gl-wms物流管理项目
TY121810的博客
07-24 1159
gl-wms物流管理项目。
实验器械、软件、基本技术介绍.ppt
最新发布
05-30
实验器械、软件、基本技术介绍.ppt
Ubuntu Fcitx5五笔新世纪字根（.dict文件）
05-30
用于替换Fcitx5五笔的默认“86版本”，替换后，就可以拥有“五笔新世纪字根”，可以实现新世纪版本输入。
基于VSG并网控制的小信号建模分析：模型对比与可靠性验证 - 并网控制 参考
05-30
内容概要：本文深入探讨了基于虚拟同步发电机（VSG）并网控制系统的建模与仿真。VSG技术为并网逆变器提供了类似同步发电机的惯性特征，是分布式发电和微电网的重要技术。文章首先介绍了VSG技术的基本概念，然后详细阐述了VSG功率回路的小信号建模方法，推导了线频平均小信号模型。接着，通过仿真对比验证了小信号模型的可靠性，证明其能够准确预测VSG并网控制系统的动态行为。最后，展示了使用Python实现VSG小信号建模和仿真的代码示例。 适合人群：电力电子、自动化控制、分布式能源系统等相关领域的研究人员和技术人员。 使用场景及目标：适用于从事分布式发电和微电网研究的技术人员，帮助他们理解VSG技术的工作原理，掌握小信号建模的方法，并通过仿真验证模型的可靠性，从而优化系统参数和提高系统稳定性。 其他说明：文中提供的代码示例有助于读者快速上手实践，进一步加深对VSG技术和小信号建模的理解。
钻石行业分析：2023年中国钻石进口量同比增长7.1%.pdf
05-30
行业研究 ，新闻稿，简短分析
360°混凝土满包基础大样图（排水管道）_dwg.dwg
05-30
360°混凝土满包基础大样图（排水管道）_dwg
人工智能介绍.ppt
05-30
人工智能介绍.ppt
PFC 7.0版二维隧洞非平稳渗流模拟：差分法与颗粒流模拟的应用研究 - FISH语言 实战版
05-30
内容概要：本文介绍了使用PFC 7.0进行二维隧洞非平稳渗流模拟的研究。研究重点在于通过FISH语言编写差分法程序，实现对非平稳渗流现象的精细模拟。文中详细阐述了差分法的具体实现步骤，包括颗粒属性定义、相互作用力计算、速度和位置更新、流体压力场更新等关键环节。此外，还讨论了非平稳渗流模拟在地质工程中的重要性和应用前景。 适合人群：从事地质工程、岩土力学及相关领域的研究人员和技术人员。 使用场景及目标：适用于需要深入了解和模拟地下隧洞非平稳渗流现象的科研项目和工程项目。目标是提高对非平稳渗流的理解，优化工程设计方案，确保施工安全。 其他说明：本文不仅展示了具体的编程技术和模拟方法，还强调了非平稳渗流模拟的实际意义及其在未来研究中的潜在价值。
电动汽车数据集（10600条记录，22特征）XLSX
05-30
包含特征：电动汽车品牌、电动汽车产地、电动汽车产量、电动汽车销量、电动汽车运行公里数、电动汽车生产日期、拥有者会员级别、电动汽车原价、电动汽车售价、电动汽车利润、电动汽车过户状态、电动汽车厂商、电池容量（kWh）、续航里程（NEDC/CLTC）、充电效率（快充/慢充）、驱动形式（前驱/后驱/四驱）、市场份额、用户年龄、用户性别、用户职业、用户使用习惯（日均里程/充电频率）、电动汽车智能化水平（自动驾驶等级/OTA频率）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜逼の世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值