汉枫HF2211使用mqtt协议，获取modbus温湿度设备数据展示到界面上

在汉枫官网下载IOTSerive软件

HF2211有两种版本，一种是485/232转wifi信号和485/232转4g信号，区别就是转4g信号需要流量卡，这里我使用的是转wifi信号，具体配置wifi信号方法参考汉枫官网http://www.hi-flying.com/, 下图是已经配置好的设置。

接线方式

• 这里我们将演示获取温湿度至客户端
  串口服务器A接线传感器A，B接线传感器B，电源+，-相接，如图：
  

使用node.js搭建mqtt服务器

• 使用mosca搭建mqtt服务器，1883是mqtt端口，1884是是客户端可以使用websocket

  const mosca = require('mosca'); 
  //构建自带服务器  1883 为mqtt 1884 为前端websocket通讯端口  前端无法直接使用mqtt
  const MqttServer = new mosca.Server({
      port: 1883,
      http: {
          port: 1884,
          bundle: true,
          static: './'
      },
      user:'123456',
      password :'123456'
  })
  //对服务器端口进行配置， 在此端口进行监听
  MqttServer.on('clientConnected', function(client) {
      //监听连接
      if(client.id === 'reality') {
        console.log('汉枫串口服务器连接成功.......');
      } else {
        console.log('本地mqtt连接成功.......');
      }
  });
  
  MqttServer.on('ready', function() {
      //当服务开启时
      console.log('Mosca server is running, waitting connent...');
  });
  
  module.exports = MqttServer

导入脚本

• 此脚本的含义是连接传感器串口”01 04 00 00 00 02 71 CB”，10秒发布一次数据

  FLASHMAGIC=3
  FLASH(NUM)HFScriptFunction=1
  FLASH(NUM)qryIntv=1000
  FLASH(NUM)upIntv=10
  FLASH(NUM)upMetd=0
  FLASH(NUM)upJson=1
  FLASH(STRSTR)jsonName="testname1"
  FLASH(STRHEX)cmd1="01 04 00 00 00 02 71 CB"

在IOTSerive软件上设置mqtt协议

• 需要注意的是这里的服务器地址，如果是本机地址，不能使用127.0.0.1这个ip,要使用真实的本机ip地址。
  

node.js后台接受到串口服务器的发布，就可以存储或者发布到客户端

• 注意这里的数据是寄存器地址格式需要做格式化处理，uartDataFormat是我做格式化处理的函数

  case 'reality/up':
         client1.publish("temperature", uartDataFormat(JSON.parse(packet.payload.toString()).value, 6).toString(), { qos: 0, retain: true });
         client1.publish("humidity", uartDataFormat(JSON.parse(packet.payload.toString()).value, 10).toString(), { qos: 0, retain: true });

前端通过订阅mqtt的发布获取到数据

// 连接mqtt并订阅
client.on('connect', () => {
  client.subscribe([ 'temperature' 'humidity'], {
    qos: 0, retain: true
  }, error => {
    if (!error) {
      Notification({
        title: 'MQTT 订阅成功',
        message: '',
        type: 'success'
      })
      // onMqttMessage()
    } else {
      Notification.error({
        title: 'MQTT 订阅失败',
        message: ''
      })
    }
  })
})

最终展示