自己寫微信小程序MQTT模擬器

陳拓 [email protected] 2019.10.6/2019.10.11

1. MQTT模擬器體驗

在自己寫MQTT模擬器之前先從網上安裝一個現成的體驗一下，這可以先看看我之前寫的文章《微信小程序MQTT模擬器阿里雲物聯網平臺測試》，在下面的網址可以找到這篇文章：

https://mp.csdn.net/postedit/102216865

https://zhuanlan.zhihu.com/p/84810734

下面我們自己寫一個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/[email protected]/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)
  },
})