自己写微信小程序MQTT模拟器

原创已于 2022-03-12 22:02:25 修改 · 1.4w 阅读

114 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #物联网 #阿里云 #MQTT #模拟器

于 2019-10-11 18:52:23 首次发布

物联网同时被 3 个专栏收录

25 篇文章

订阅专栏

阿里云

13 篇文章

订阅专栏

微信小程序

2 篇文章

订阅专栏

自己写微信小程序MQTT模拟器

陈拓 2019.10.6/2019.10.11

1. MQTT模拟器体验

在自己写MQTT模拟器之前先从网上安装一个现成的体验一下，这可以先看看我之前写的文章《微信小程序MQTT模拟器阿里云物联网平台测试》，在下面的网址可以找到这篇文章：

优快云

微信小程序MQTT模拟器阿里云物联网平台测试 - 知乎

下面我们自己写一个MQTT模拟器实现这些功能。

2. 创建新项目

2.1 打开微信开发者工具，新建项目

填写你的AppID，新建。

在默认情况下，项目路径为C:\Users\Administrator\WeChatProjects。

2.2 准备图片

放在pages下的images目录中。

2.3 改写系统生成的代码

2.3.1 改写app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的MQTT模拟器",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

只改“我的MQTT模拟器”这里。

2.3.2 下载支持MQTT协议的js库和支持sha1加密的库

下载mqtt.js

https://github.com/mqttjs/MQTT.js

或者下载mqtt.min.js

https://unpkg.com/mqtt@3.0.0/dist/mqtt.min.js

mqtt.min.js小一些。

下载hex_hmac_sha1.js

https://github.com/xihu-fm/aliyun-iot-client-sdk/tree/master/lib

两个js文件都放在utils目录下：

2.3.3 改写index.wxml

<!--index.wxml-->
<view>
  <view class="main-center">
    <image src="{{imageUrl}}" class="ledinfo-avatar"></image>
    <view class="ledinfo-values">
      <text>湿度：</text><text>{{humidity}}</text><text>%</text>
      <text>温度：</text><text>{{temperature}}</text><text>℃</text>
    </view>
  </view>
  <text class='subheading'>设备身份三元组</text>
  <view style='margin-top: 20rpx;'>
    <view class='connect-info background-white'>
      <text class='text'>productKey:</text> 
      <input class='input' name='productKey' placeholder='替换'
      bindinput='productKeyInput'/>
    </view>
    <view class='connect-info background-white'>
      <text class='text'>deviceName:</text> 
      <input class='input' name='deviceName' placeholder='替换'
      bindinput='deviceNameInput'/>
    </view>
    <view class='connect-info background-white'>
      <text class='text'>deviceSecret:</text> 
      <input class='input' name='deviceSecret' placeholder='替换'
      bindinput='deviceSecretInput'/>
    </view>
  </view>
  <view class="buttons">
    <view  class="button-container" bindtap='online'>
      <text class="button">设备上线</text>
    </view>
    <view  class="button-container" bindtap='publish'>
      <text class="button">上报数据</text>
    </view>
    <view  class="button-container" bindtap='event'>
      <text class="button">告　警</text>
    </view>
    <view  class="button-container" bindtap='service'>
      <text class="button">订阅主题</text>
    </view>
    <view  class="button-container" bindtap='offline'>
      <text class="button">设备下线</text>
    </view>
  </view>
  <text class='subheading'>设备日志</text>
  <view style='margin-top: 20rpx;'>
    <view class='deviceState background-white'>
      <text class='text'>{{deviceState}}</text>
    </view>
  </view> 
  <view class='devicelog'>
    <text>{{deviceLog}}</text>
  </view>
</view>

2.3.4 改写index.wxss

/**index.wxss**/
page {
  background-color: rgb(240, 240, 240);
  font-size: 26rpx;
}

.main-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connect-info {
  display: flex;
  flex-direction: row;
  margin-top: 1rpx;
  height: 60rpx;
}

.background-white {
  background-color: #FFF;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.button {
  line-height: 60rpx;
}

.button-container {
  margin-top: 0px;
  border: 1px solid #aaa;
  width: 140rpx;
  height: 60rpx;
  border-radius: 5px;
  text-align: center;
}

.ledinfo-values {
  color: #92ADF0;
  margin: 20rpx;
}

.ledinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
}

.subheading {
  color: rgb(128, 128, 128);
  margin: 20rpx;
}

.text {
    width: 220rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
}

.input {
    width: 100%;
    height: 30rpx;
    margin-left: 20rpx;
    margin-top: 10rpx;
    color: rgb(128, 128, 128);
}

.deviceState {
  color: #1d953f;
}

.devicelog {
  margin-top: 20rpx;
  word-break:break-all;
  color: #426ab3;
}

2.3.5 改写index.js

//index.js

// 设备身份三元组+区域
const deviceConfig = {
  productKey: "替换",
  deviceName: "替换",
  deviceSecret: "替换",
  regionId: "cn-shanghai"
};

function getPostData() {
  const payloadJson = {
    id: Date.now(),
    params: {
      temperature: Math.floor((Math.random() * 20) + 10),
      humidity: Math.floor((Math.random() * 20) + 60)
    },
    method: "thing.event.property.post"
  }
  return JSON.stringify(payloadJson);
}

function getAlarmPostData() {
  const payloadJson = {
    id: Date.now(),
    params: {
      temperature: Math.floor((Math.random() * 20) + 10)
    },
    method: "thing.event.hotAlarm.post"
  }
  return JSON.stringify(payloadJson);
}

const util = require('../../utils/util.js')
var mqtt = require('../../utils/mqtt.min.js')
const crypto = require('../../utils/hex_hmac_sha1.js')
var client
Page({
  data: {
    temperature: '0',
    humidity: '0',
    imageUrl: '../images/iLED1.png',
    deviceLog: '',
    deviceState: ''
  },

  // 设备身份三元组输入框事件处理函数
  productKeyInput: function (e) {
    deviceConfig.productKey = e.detail.value
  },
  deviceNameInput: function (e) {
    deviceConfig.deviceName = e.detail.value
  },
  deviceSecretInput: function (e) {
    deviceConfig.deviceSecret = e.detail.value
  },

  // 设备上线 按钮点击事件
  online: function (e) {
    this.doConnect()
  },
  doConnect() {
    var that = this;
    const options = this.initMqttOptions(deviceConfig);
    console.log(options)
    client = mqtt.connect('wxs://productKey.iot-as-mqtt.cn-shanghai.aliyuncs.com', options)
    client.on('connect', function () {
      console.log('连接服务器成功')
      let dateTime = util.formatTime(new Date());
      that.setData({
        deviceState: dateTime + ' Connect Success!'
      })
    })
  },

  //IoT平台mqtt连接参数初始化
  initMqttOptions(deviceConfig) {
    const params = {
      productKey: deviceConfig.productKey,
      deviceName: deviceConfig.deviceName,
      timestamp: Date.now(),
      clientId: Math.random().toString(36).substr(2),
    }

    //CONNECT参数
    const options = {
      keepalive: 60, //60s
      clean: true, //cleanSession不保持持久会话
      protocolVersion: 4 //MQTT v3.1.1
    }

    //1.生成clientId，username，password
    options.password = this.signHmacSha1(params, deviceConfig.deviceSecret);
    options.clientId = `${params.clientId}|securemode=2,signmethod=hmacsha1,timestamp=${params.timestamp}|`;
    options.username = `${params.deviceName}&${params.productKey}`;

    return options;
  },

  /*
    生成基于HmacSha1的password
    参考文档：https://help.aliyun.com/document_detail/73742.html?#h2-url-1
  */
  signHmacSha1(params, deviceSecret) {
    let keys = Object.keys(params).sort();
    // 按字典序排序
    keys = keys.sort();
    const list = [];
    keys.map((key) => {
      list.push(`${key}${params[key]}`);
    });
    const contentStr = list.join('');
    return crypto.hex_hmac_sha1(deviceSecret, contentStr);
  },

  // 上报数据 按钮点击事件
  publish: function (e) {
    var that = this;
    let topic = `/sys/${deviceConfig.productKey}/${deviceConfig.deviceName}/thing/event/property/post`;
    // 注意用`符号，不是' ！！！！！
    let JSONdata = getPostData()
    console.log("===postData\n topic=" + topic)
    console.log("payload=" + JSONdata)
    client.publish(topic, JSONdata)
    that.setData({
      deviceLog: 'topic=' + topic + '\n' + 'payload=' + JSONdata
    })
  },

  // 告警 按钮点击事件
  event: function (e) {
    var that = this;
    let topic_alarm = `/sys/${deviceConfig.productKey}/${deviceConfig.deviceName}/thing/event/hotAlarm/post`;
    let JSONdata = getAlarmPostData()
    console.log("===postData\n topic=" + topic_alarm)
    console.log("payload=" + JSONdata)
    client.publish(topic_alarm, JSONdata)
    that.setData({
      deviceLog: 'topic=' + topic_alarm + '\n' + 'payload=' + JSONdata
    })
  },

  // 订阅主题 按钮点击事件
  service: function (e) {
    var that = this;
    that.setData({
      deviceLog: '接收消息监听'
    })
    //接收消息监听
    let topic = `/sys/${deviceConfig.productKey}/${deviceConfig.deviceName}/thing/event/property/post`;
    client.on('message', function (topic, message) {
      // message is Buffer
      let messageStr = message.toString()
      console.log('收到消息：' + messageStr)
      that.setData({
        deviceLog: '收到消息：\n' + messageStr
      })

      if (messageStr.indexOf('on') > 0) {
        that.setData({
          imageUrl: '../images/iLED2.png',
        })
      }
      if (messageStr.indexOf('off') > 0) {
        that.setData({
          imageUrl: '../images/iLED1.png',
        })
      }
      if (messageStr.indexOf('blue') > 0) {
        that.setData({
          imageUrl: '../images/iLED3.png',
        })
      }
      if (messageStr.indexOf('green') > 0) {
        that.setData({
          imageUrl: '../images/iLED4.png',
        })
      }
    })
  },

  // 设备下线 按钮点击事件
  offline: function () {
    var that = this;
    client.end()  // 关闭连接
    console.log('服务器连接断开')
    let dateTime = util.formatTime(new Date());
    that.setData({
      deviceState: dateTime + ' Disconnect!'
    })
  },

  onLoad: function () {
    var that = this
    setInterval(function () {
      that.setData({
        temperature: Math.floor((Math.random() * 20) + 10),
        humidity: Math.floor((Math.random() * 20) + 60)
      })
    }, 3000)
  },
})