前后端实现mqtt物联网消息互通对话(图文详解)

这篇具有很好参考价值的文章主要介绍了前后端实现mqtt物联网消息互通对话(图文详解)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:前端使用mqtt订阅主题和硬件设备进行通讯功能,不走后端,前端操作可以控制。从部署到对话,跟着图文一套下来你也可以学会。很简单的。后端用node,前端就用原生的js,如果要使用vue,可以看我另外一篇:(255条消息) 使用MQTTX和前端vue进行通讯_请叫我欧皇i的博客-CSDN博客

注意!!!!!后端部署如果跟你说的是没有用到websocket,用的是tcp协议,给你个地址mqtt://域名:端口,这种的话,直接要后端改,转为ws://域名:端口/mqtt,这样就可以连上了,不然会一直提示连不上,也不是前端的问题,就是后端没加配置导致的。

1.下载EMQX

官网链接:下载 EMQX

步骤如下,我是windows系统就选windows了,看你自己是什么操作系统,根据自己的操作系统进行选择。

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 下载好后解压,之后进入到下载的bin目录

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

控制台输入`emqx start`,注意,此时控制台是没有反应的,就回你个D:\EMQX。其实已经打开了。

 前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 2.登录emqx控制台和基本配置图文讲解

 控制台先别关,直接进入EMQX Dashboard,账号admin,密码:public,进行登录后会要求你自己修改密码,想改就改不想改就不改。

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 点击第四个图标选择监听器可以查看到mqtt的默认监听类型和端口号

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 点击第五个图标选择websocket客户端可以看到默认连接的主机名和端口,主题订阅等。

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 3.下载node-red

回到之前的控制台,输入

npm install -g node-red

 前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 下载完后输入node-red运行

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 点击登录node-redNode-RED,输入mqtt

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 选择四个节点,并且连接状态如下,连接是手动连接的,上面的hello什么的是配置的,往下看就行了

inject:输入,发消息给客户端

mqtt out:输出

matt in :输入

debug:调试

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 4.配置node-red

1.配置mqtt out

注意!!mqtt in 和mqtt out 配置一样就行了

Qos是决定消息质量,Qos:0,是发送端只发送一次,不管服务端收到没,1是至少发送一次,反正服务端一定能收到 1次,有可能收到2次以上,2保证服务端收到且只收到一次,值越大质量越高,qos越小,网络带宽越低。耗能越低

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

就修改如下俩个就行了,连接本地的1883,之后点击更新按钮,如果没有更新就点完成。

 前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 编辑inject节点,选择左边的az,选择文字列,输入内容后点击完成前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 最后:点击右上角部署

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 调试:

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 5.EMQX连接websocket客户端查看收到消息没

回到之前的EMQX页面

选择客户端,可以看到已经连接了一个客户端,那就是node-red部署的

在websocket客户端点击连接,之后订阅我在node-red设置的主题,从node-red发出消息,websocket也可以接收到。

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

6.nodejs实现主题订阅,发送消息给mqtt

npm init -y

npm install mqtt

创建index.js

const mqtt = require('mqtt')
const client  = mqtt.connect('mqtt://localhost')

client.on('connect', function () {
  client.subscribe('/test', function (err) {
    if (!err) {
      client.publish('/test', 'Hello node js')
    }
  })
})

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString())
  client.end()
})

注意这个hellow node js,这个是我订阅了test主题后发送的消息给mqtt服务器

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 7.前端实现消息发送和订阅

首先找到node_modules下的mqtt==》dist===》复制mqtt.min.js到前端的文件夹下

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 或者使用

    <script src="https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js"></script>

完整连接代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mqtt/4.1.0/mqtt.min.js"></script>
  </head>
  <body>
    <form onsubmit="return false">
        <h3>WebSocket 聊天室:</h3>
        <textarea
          id="textarea"
          style="width: 500px; height: 300px"
        ></textarea>
        <br />
        <input type="text" id="myInput" />
        <button onclick="handleClick()">点击获取输入框的值发送</button>
        <input
          type="button"
          value="清空聊天记录"
          onclick="javascript:document.getElementById('myInput').value=''"
        />
        <button onclick="closeWeb()">关闭客户端连接</button>
      </form>

    <script>
      // 连接地址,有很多连接失败都是因为地址没写对
      const connectUrl = `ws://localhost:8083/mqtt`;
      // 客户端ID 随机数以免重复
    //   const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
    //   const clientId = `mqttx_a16dc275`;
    //   console.log("客户端id:" + clientId);

      // 连接设置
      let options = {
        clean: true, // 保留会话
        connectTimeout: 4000, // 超时时间
        reconnectPeriod: 1000, // 重连时间间隔
        // 认证信息
        // clientId,
        // username: "root3",
        // password: "123456",
      };
      // 需要订阅的主题
      const topic = "esp8266";
      const topic1 = "/test";

      // 创建客户端
    //   var client = mqtt.connect(connectUrl, options);
    var client =mqtt.connect('ws://localhost:8083/mqtt');

      // 成功连接后触发的回调
      client.on("connect", () => {
        $("#ts").html("在线");
        console.log("已经连接成功");
        // 订阅主题,这里可以订阅多个主题
        client.subscribe([topic, topic1], () => {
          console.log(`订阅了主题 ${[topic, topic1].join("和")}`);
        });
      });

      // 当客户端收到一个发布过来的消息时触发回调
      /**
       * topic:收到的报文的topic
       * message:收到的数据包的负载playload
       * packet:MQTT 报文信息,其中包含 QoS、retain 等信息
       */
      client.on("message", function (topic, message, packet) {
        // 这里有可能拿到的数据格式是Uint8Array格式,可以直接用toString转成字符串
        // let data = JSON.parse(message.toString());
        console.log("获取到的数据:", message);
        console.log("数据对应订阅主题:", topic);
        var ta =document.getElementById("textarea")
        ta.value=ta.value + "\n" + message;
        // var message_packet = JSON.parse(Uint8ArrayToString(packet.payload));
        // console.log("获取到的数据包:", message_packet);
        // message_packet.msg;
      });

      // 当重新连接启动触发回调
      client.on("reconnect", () => {
        $("#ts").html("重连");
        console.log("正在重新连接");
      });

      // 连接断开后触发的回调
      client.on("close", function () {
        $("#ts").html("离线");
        console.log("已断开连接");
      });

      // 在收到 Broker(消息服务器) 发送过来的断开连接的报文时触发的回调,参数 packet 即为断开连接时接收到的报文。MQTT 5.0特性
      client.on("disconnect", function (packet) {
        console.log("从broker接收到断开连接的报文:" + packet);
      });

      // 客户端脱机下线触发回调
      client.on("offline", function () {
        console.log("您已断开连接,请检查网络");
      });

      // 当客户端无法成功连接时或发生解析错误时触发的回调,参数 error 为错误信息
      client.on("error", (error) => {
        console.log("客户端出现错误:", error);
      });

      //当客户端发送任何数据包时发出。这包括publish()以及MQTT用于管理订阅和连接的包
      client.on("packetsend", (packet) => {
        console.log("客户端已发出报文", packet);
      });

      //当客户端接收到任何报文时发出。这包括来自订阅主题的信息包以及MQTT用于管理订阅和连接的信息
      client.on("packetreceive", (packet) => {
        // 会在 client.on('message', function (topic, message, packet) {}); 之前触发
        console.log("客户端接收报文", packet);
      });

      // 关闭客户端(断开连接)
      //client.end();

      // 发送信息给 topic(主题)
      //client.publish(topic, '这是给topic发送的信息');

      //var topic_data=[];
      //topic_data.push(map)
      function Uint8ArrayToString(fileData) {
        var dataString = "";
        for (var i = 0; i < fileData.length; i++) {
          dataString += String.fromCharCode(fileData[i]);
        }
        return dataString;
      }
      function handleClick(){
        var inputElement = document.getElementById("myInput");
        var value = inputElement.value;
        console.log(value,'获取到的值');
        if(value != "" && value !=null){
            // 发送信息给 topic1
            client.publish(topic1, value);
            var ta =document.getElementById("textarea")
            // ta.value+=value;
            
        }else{
            alert("请填写内容")
        }
      }
      function closeWeb(){
              client.end();
      }
    </script>
  </body>
</html>

效果如下:

上面俩个报错,是我浏览器版本过低,vue的扩展插件报错,不用管

前后端实现mqtt物联网消息互通对话(图文详解),工具类,vue,后端,vue.js,前端,物联网

 这样就实现了,是不是很简单,文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-532799.html

到了这里,关于前后端实现mqtt物联网消息互通对话(图文详解)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第2节-编写STM32程序初步实现ESP8266上云与发布订阅消息

    本节目标: 本节实现,硬件连接STM32与ESP8266,编写STM32程序通过at命令方式实现STM32+ESP8266与阿里云物联网平台发布订阅消息,本节最终实现初步的发布订阅消息(能够发布消息给阿里云物联网平台但无外设数据,能够订阅阿里云物联网平台发送的消息来开关LED灯)。 硬件连接

    2024年02月03日
    浏览(70)
  • 使用合宙Air724UG物联网模块发送MQTT消息至EMQX服务器 MQTT如何发送消息 AIR724发送MQTT至腾讯云 腾讯云接收MQTT消息

    在上一篇关于物联网的文章中介绍了如何建立一个MQTT的EMQX服务器,有需要的同学可以点击查看。在这里服务器的作用相当于建立一个MQTT消息的中转站,消息先发送到服务器中,再在服务器进行转发消息。 那么有了一个转发的平台,如何在嵌入式终端中发送MQTT消息呢,在这

    2024年02月09日
    浏览(58)
  • MQTT 与 Kafka|物联网消息与流数据集成实践

    MQTT (Message Queuing Telemetry Transport) 是一种轻量级的消息传输协议,专为受限网络环境下的设备通信而设计。Apache Kafka 是一个分布式流处理平台,旨在处理大规模的实时数据流。 Kafka 和 MQTT 是实现物联网数据端到端集成的互补技术。通过结合使用 Kafka 和 MQTT,企业可以构建一个

    2024年02月16日
    浏览(35)
  • Virtualbox 虚拟机实现与本地、互联网互通

    1、Windows版本:Windows10 专业版 2、virtualbox版本:6.1.10 3、centos版本:7.9 4、本文出处:https://www.cnblogs.com/crazyMyWay/p/18104612 1、Virtualbox 工具先设置网卡及DHCP服务器     2、virtualbox设置两个网卡,一个是仅主机,一个是桥接       3、Windows 网络连接自动多出如下网卡及IP地址  

    2024年04月08日
    浏览(76)
  • 什么是MQTT,物联网MQTT协议详解

    老俊目前正在从事物联网行业,对MQTT有一定的了解,本文为您简述什么是MQTT,以及MQTT怎么使用 物联网 (IoT) 和机器对机器 (M2M) 通信对我们与技术交互的方式产生了持久影响。到 2022 年底,全球连接的物联网设备数量增长了 18%,达到 144 亿, 到 2025 年估计连接的物联网设备将

    2024年02月12日
    浏览(53)
  • EMQ X与RabbitMQ:MQTT消息服务器在物联网中的性能对比

    在物联网中,消息传递是实现设备之间通信的关键。MQTT(Message Queuing Telemetry Transport)作为一种轻量级的消息传递协议,被广泛应用于物联网领域。EMQ X和RabbitMQ是两个常见的MQTT消息服务器,它们在性能方面有所差异。本文将对它们进行性能对比,并提供相应的源代码。 EMQ

    2024年04月16日
    浏览(42)
  • 基于OpenWrt使用MQTT物联网协议详解和应用

    大家好,这篇文章给大家介绍MQTT协议以及如何在OpenWrt系统中使用MQTT客户端和开发,并给出相关实例代码。 MQTT(Message Queuing Telemetry Transport)是一种轻量级的通信协议,设计用于在低带宽和不稳定的网络环境中传输消息。它最初由IBM开发,用于连接远程设备和传感器到网络,

    2024年02月02日
    浏览(60)
  • 基于智慧家居场景的端云互通实验——基于MQTT协议的智慧家居端云互通开发

    使用Wi-Fi模组并基于MQTT协议进行联网 将温湿度传感数据上传至云平台 对平台下发的开启蜂鸣器命令进行处理 将命令响应上报至平台 在使用MQTT协议与平台进行对接时,使用的IP地址和端口号是121.36.42.100:1883 按照下表填写注册信息: 其中相连服务器的IP地址与端口即华为云物

    2023年04月08日
    浏览(35)
  • springboot实现简单的消息对话

    目录 一、前言 二、实战步骤 步骤 1: 步骤 2: 步骤 3: 步骤 4: 要在Spring Boot项目中实现消息对话,你可以使用WebSocket技术。WebSocket是一种在客户端和服务器之间提供实时双向通信的协议。 添加依赖 首先,在您的Spring Boot项目的 pom.xml 文件中添加以下依赖: 创建WebSocket配置

    2024年02月10日
    浏览(30)
  • MQTT,如何在SpringBoot中使用MQTT实现消息的订阅和发布

    1.1 什么是MQTT? MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建于TCP/IP协议上,由IBM在1999年发布。 MQTT最大优点在于用极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息

    2024年02月10日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包