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

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

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

1.下载EMQX

官网链接：下载 EMQX

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

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

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

 

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

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

 

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

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

 3.下载node-red

回到之前的控制台，输入

npm install -g node-red

 

 下载完后输入node-red运行

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

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

inject：输入，发消息给客户端

mqtt out：输出

matt in ：输入

debug：调试

 4.配置node-red

1.配置mqtt out

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

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

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

 

 编辑inject节点，选择左边的az，选择文字列，输入内容后点击完成

 最后：点击右上角部署

 

 调试：

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

回到之前的EMQX页面

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

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

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服务器

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

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

 或者使用

完整连接代码如下

  
    
    
    
    
    
    
  
  
    

        
WebSocket 聊天室：
        
        

        
        点击获取输入框的值发送
        
        关闭客户端连接
      

    
  

效果如下：

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

 这样就实现了，是不是很简单，文章到此结束，希望对你有所帮助~