【MQTT】Vue中使用mqtt

news2024/11/26 22:34:36

MQTT(Message Queuing Telemetry Transport)作为一种轻量级、开放、灵活、简单、易于实现的通信协议。它基于发布/订阅(Publish/Subscribe)模式的消息传输协议,在上位机和硬件设备间通信时经常用到。虽然在嵌入式软件一般使用C++来编码,但是难免有web端直接与设备交互的应用场景,本文将介绍mqtt本地服务部署和基于Vue的web端应用使用mqtt的全过程。

mqtt部署

EMQX(Erlang MQTT Broker)是一个用于支持 mqtt 的开源消息代理软件,这里我们用他来作为本地的mqtt 服务器。可以从这里下载,运行步骤如下

安装步骤

  • emqxbin文件夹下运行emqx start
    在这里插入图片描述
  • 进入服务端可视化面板http://127.0.0.1:18083
    在这里插入图片描述
  • 下载mqttx,这是mqtt的客户端工具,在调试的时候比较方便和清楚。下载。新建连接,连接到我们刚才启动的服务上。
    在这里插入图片描述
  • 测试一下是否连接上
    在这里插入图片描述

注意事项

  1. 运行emqx报错、启动不了
    原因可能是emqx文件夹所在的路径有中文或空格,导致服务不能启动。

  2. 服务启动后控制面板报错url not found
    原因是服务端口被占用了,emqx默认监听的是8081端口,找到下面这个文件,把监听的端口改成空闲的端口即可。
    在这里插入图片描述
    这里改成了8089
    在这里插入图片描述

Vue连接mqtt

  1. 安装mqtt的依赖
npm install mqtt
  1. 使用mqtt.js来建立MQTT连接并监听订阅。以下是一个简单的Vue组件示例:
<template>
  <div id="app">
  </div>
</template>

<script>
import mqtt from "mqtt";
import * as mqttUtils from "./utils/mqtt";

export default {
  name: "App",
  data() {
    return {
      config: {
        username: "admin",
        password: "123456",
        clientId: "code_dev_ui" + new Date().getTime(),
        keepAlive: 60,
        cleanSession: true,
        clear: true,
      },
      client: null,
      brokerUrl: "ws://localhost:8083/mqtt",
      topics: ["mqtt/#"],
  },
  mounted() {
    this.handleConnection();
  },
  methods: {
    /**
     * 建立连接
     */
    handleConnection() {
      var client = mqtt.connect(this.brokerUrl, this.config);
      this.client = client;
      // 保存至全局
      this.$store.dispatch("connectSucc", client);

      client.on("connect", (e) => {
        console.log(e, "mqtt连接成功!");
        mqttUtils.sub(client, this.topics, 0);
      });

      // 消息处理
      client.on("message", (topic, message) => {
        var text = new TextDecoder().decode(message);
        const info = eval("(" + text + ")");
        console.log("收到消息app:", topic, info);
        this.mqttControl(topic, info);
      });

      // 断线重连
      client.on("reconnect", (error) => {
        console.log("正在重连:", new Date().getTime(), error);
      });

      // 连接失败
      client.on("error", (err) => {
        console.log("mqtt连接失败!{}", err);
        client.end();
      });
    },

    /**
     * mqtt消息接收 事件回调
     */
    mqttCallBack(topic, info) {
      console.log(topic,info);
   },
};
</script>

3.Java后端连接使用mqtt配置如下

mqtt:
  hostUrl: ws://localhost:8083/mqtt
  username: admin
  password: public
  client-id: MQTT-CLIENT-DEV2
  cleanSession: true
  reconnect: true
  timeout: 100
  keepAlive: 80
  defaultTopic: pop
  defaultTopics: mqtt
  serverTopic: mqtt
  isOpen: true
  qos: 0
  qoss: 0,0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1530760.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1、Java虚拟机学习-类的生命周期-加载阶段-以及怎样查看方法区中的对象和堆中对象的关联以及静态变量存在什么地方

类的生命周期 其中连接又可以分为3个小阶段 一、加载阶段 1、加载阶段第一步是类加载器根据类的全限定名通过不同的渠道以二进制流的方式获取字节码信息。 渠道: 2、类加载器在加载完类之后&#xff0c;Java虚拟机会将字节码中的信息保存在内存的方法区中。 方法区是虚拟…

AI - 机器学习GBDT算法

目录 GBDT 提升树 梯度提升树 GBDT算法实战案例 XGBoost &#x1f606;&#x1f606;&#x1f606;感谢大家的观看&#x1f606;&#x1f606; GBDT 梯度提升决策树&#xff08;Gradient Boosting Decision Tree&#xff09;&#xff0c;是一种集成学习的算法&…

基于springboot+vue的餐饮管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

GAMES101 学习3

Lecture 13 ~ 16 Shadow mapping 一种图像空间算法生成阴影时不需要知道场景中的几何信息会产生走样现象 最重要的思想&#xff1a;如果有的点不在阴影里你又能看到这个点&#xff0c;那么说明摄像机可以看到这个点&#xff0c;光源也可以看到这个点 经典的Shadow mapping …

提升合规性!Zoho如何优化CRM产品合规性?

在企业数字化和信息化高速发展的今天&#xff0c;CRM管理系统成为越来越多企业的选择。然而&#xff0c;不是所有CRM供应商都有合规意识。合规性不应当只是一项法律规定&#xff0c;更是保证CRM供应商持续发展、赢得客户信赖以及应付监管压力的关键支撑。Zoho对企业合规性的重视…

智能码垛机:企业高效物流管理的得力助手

在快速发展的现代企业中&#xff0c;高效物流管理不仅是提升竞争力的关键&#xff0c;更是降低成本、增加利润的重要手段。随着科技的进步&#xff0c;智能码垛机作为现代物流技术的重要组成部分&#xff0c;正日益成为企业实现高效物流管理的得力助手。 一、智能码垛机的工作原…

基于Python的口罩佩戴识别的设计与实现(UI界面+MySQL数据库+YOLOv5+训练数据集+开题报告+中期检查+论文)

摘要 文旨在基于Python开发一种口罩佩戴识别系统&#xff0c;通过深度学习技术实现对口罩佩戴情况的准确检测。采用了YOLOv5系列目标检测算法作为基础模型&#xff0c;并结合迁移学习进行训练和优化。同时&#xff0c;为了提供更好的用户体验&#xff0c;本系统还设计了用户登录…

排序算法之选择排序介绍

目录 算法简介 算法描述 代码实现 算法简介 选择排序(Selection-sort)是一种简单直观的排序算法。它的工作原理&#xff1a;首先在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素…

再谈EMC Unity存储系统内存DIMM问题

以前写过一篇关于EMC Unity 存储系统的DIMM的介绍文章&#xff0c;但是最近还是遇到很多关于内存的问题&#xff0c;还有一些退货&#xff0c;所以有必要再写一篇关于EMC Unity 内存方面的问题&#xff0c;供朋友们参考。如果还有疑问&#xff0c;可以加vx&#xff1a;StorageE…

代码随想录day24(1)二叉树:最大二叉树(leetcode654)

题目要求&#xff1a; 给定一个不含重复元素的整数数组。一个以此数组构建的最大二叉树定义如下&#xff1a; 二叉树的根是数组中的最大元素。左子树是通过数组中最大值左边部分构造出的最大二叉树。右子树是通过数组中最大值右边部分构造出的最大二叉树。 通过给定的数组构…

【爬虫实战】使用Python获取花粉俱乐部中Mate60系列的用户发帖数据

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

重装系统后鼠标识别不了咋办

不知道大家在重装系统时,有没有遇到过系统重装完成后,鼠标不能使用的情况。在这种情况下,我们要怎么操作电脑解决这个问题呢?今天就跟大家分享重装系统后鼠标识别不了咋办。 一、主板没有设置兼容usb 在重装系统时,如果主板没有设置兼容usb,就会出现鼠标使用不了的现象。…

C++基础之友元(十)

由于C类的封装性&#xff0c;所以类的私有成员只能在类的内部访问&#xff0c;类之外是不能访问他们的。但是如果将其他类设置为类的友元&#xff08;friend&#xff09;&#xff0c;那么其他类也可以访问该类的私有成员。如果把类比作是一个家庭的话&#xff0c;那么private就…

安防监控平台EasyCVR使用管理员权限登录后,平台菜单栏显示不全是什么原因?

安防视频监控系统EasyCVR视频综合管理平台&#xff0c;采用了开放式的网络结构&#xff0c;平台能在复杂的网络环境中&#xff08;专网、局域网、广域网、VPN、公网等&#xff09;将前端海量的设备进行统一集中接入与视频汇聚管理&#xff0c;平台支持设备通过4G、5G、WIFI、有…

国创证券|中国资产,突传重大利好!外资最新动作曝光!

外资正在从头定价我国财物。 据彭博社最新报导&#xff0c;全球基金正在活跃购入我国股票&#xff0c;已接连第2个月净买入我国股票。其间&#xff0c;挪威的Skagen AS以及美国的Boston Partners两家全球基金近几个月来大举增持了A股、港股相关股票&#xff0c;增持的理由是&a…

最新Java面试题3【2024初级】

下载链接&#xff1a;博主已将以上这些面试题整理成了一个面试手册&#xff0c;是PDF版的 互联网大厂面试题 1&#xff1a;阿里巴巴Java面试题 2&#xff1a;阿里云Java面试题-实习生岗 3&#xff1a;腾讯Java面试题-高级 4&#xff1a;字节跳动Java面试题 5&#xff1a;字…

Markdown 最全语法指南 —— 看这一篇就够了

目录 一. 前言 二. Markdown 标题语法 三. Markdown 段落语法 四. Markdown 换行语法 五. Markdown 强调语法 六. Markdown 引用语法 七. Markdown 列表语法 八. Markdown 代码语法 九. Markdown 分隔线语法 十. Markdown 链接语法 十一. Markdown 图片语法 十二. Markdown 转义…

10 个最佳免费水印去除工具,可去除照片中的任何水印

水印可以保护您的照片&#xff0c;但时不时地&#xff0c;您需要一个应用程序来删除它们。有很多免费的水印去除应用程序可以帮助您做到这一点&#xff0c;其中包括奇客水印管家&#xff0c;它还有更多功能可供探索。继续阅读以发现 10 个最佳免费水印去除剂以及如何从照片中去…

C++第八弹---类与对象(五)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、运算符重载 1.1、赋值运算符重载 1.2、前置和后置重载 2、const成员 3、取地址及const取地址操作符重载 总结 1、运算符重载 1.1、赋值运…

opencv 傅里叶变换(低通滤波 + 高通滤波)

文章目录 1、傅里叶变换2、通过numpy实现3、高通滤波器5、通过opencv实现傅里叶变换6、低通滤波器7、C实现傅里叶变换 1、傅里叶变换 时域分析&#xff1a;以时间作为参照物&#xff0c;世间万物都是随着时间变化而变化&#xff0c;并且不会停止 频域分析&#xff1a;认为世间万…