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

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

陈拓 2019.10.6/2019.10.11

1. MQTT模拟器体验

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

CSDN

微信小程序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)
  },
})

3. 注册阿里云账号

注册阿里云账号,获得三元组:PublicKey、DeviceName、DeviceSecret。

见《微信小程序MQTT模拟器阿里云物联网平台测试》一文。

CSDN

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

4. 微信小程序测试

4.1 打开MQTT测试平台

  • 登录,点击“控制台”,选择物联网平台

4.2 用微信小程序模拟器测试

在微信开发者工具中打开模拟器。

4.2.1 设备上线

  • 输入设备身份三元组,点击“设备上线”

  • 回到物联网平台

点击F5刷新设备列表,可以看到设备状态已经是在线,查看小程序设备日志和设备列表页面中的最后上线时间,用模拟器测试慢一秒,用真机测试时间一致。

如果连接参数不正确,或遇到其他连接问题,可以在开发工具的Console中查看,例如productKey输入错误:

4.2.2 上报数据

  • 回到微信开发者开发工具

在设备上线时,点击“上报数据”,我们看到MQTT模拟器上报了当前湿度温度值。

上报的湿度73%,温度29℃。

  • 回到物联网平台,在设备详情的运行状态看设备上报的数据

和MQTT模拟器上报的数据一致。

4.2.3 告警

  • 在小程序界面

在设备上线时,点击“告警”,就会生成一条事件告警,并上报当前的温度。

  • 在物联网平台控制台“设备详情”-“事件管理”中查看

可以看到“温度过高报警”。

在实际情况下,报警温度的阈值在客户端设定,当温度超过阈值时发送报警,这里只是演示报警功能,不用在意温度值的大小。

4.2.4 订阅主题

  • 在小程序界面,在设备上线时,点击“订阅主题”:

等待接收消息。

  • 在物联网平台控制台“设备管理 > 设备详情”点击“在线调试”。

  • 转到“在线调试”页面

1) 选择设备

2) 选择“调试真实设备”选项卡

3) 选择“服务调用”

4) 选中功能“开灯(switch)”

5) 输入参数{"status":"on"}

6) 点击“发送指令”

查看实时日志:

  • 回到小程序界面

看,灯亮了!

还可以在物联网平台上:

1) 发送{"status":"off"},关灯

2) 发送{"status":"blue"},灯发蓝光

3) 发送{"status":" green"},灯发绿光

4.2.5 设备下线

  • 在小程序界面,点击“设备下线”

  • 在控制台“设备列表”中可以看到设备已经离线

4.3 用真机测试

见《微信小程序MQTT模拟器阿里云物联网平台测试》一文。

CSDN

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

5. 源代码

https://github.com/chentuo2000/MyMQTTsimulator

参考资料

  1. 实例:使用MQTT进行交互
    实例:使用MQTT进行交互 - 简书
  2. 微信小程序布局display flex布局介绍微信小程序布局display flex布局介绍_大灰狼的小绵羊哥哥的博客-CSDN博客_小程序display:flex
  3. 微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器,封装起来使用就是这么简单!
    【微信小程序控制硬件⑧ 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器,封装起来使用就是这么简单!(附带Demo)_徐宏的博客 | 修身齐家治国平天下-CSDN博客_微信小程序连接阿里云物联网平台
  4. 阿里云物联网平台数据格式
    数据格式 - 阿里云物联网平台 - 阿里云

  • 14
    点赞
  • 107
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
微信小程序中使用MQTT协议进行通信,在上线时需要注意一些问题。根据引用\[1\],可以引入MQTT.JS库来实现MQTT功能。然而,根据引用\[2\]的描述,小程序在上线时必须使用HTTPS协议,因此需要使用wss作为MQTT的加密协议。为了解决这个问题,可以尝试以下方法: 1. 配置MQTT证书:根据引用\[2\]的描述,对MQTT证书进行配置可能有助于解决小程序访问wss的问题。可以参考引用\[3\]中提到的关键词,如emqx配置websocket ssl、emqx配置ssl等,来获取更多关于配置证书的信息。 2. 使用小程序反向代理:另一种解决方法是通过使用小程序反向代理来解决MQTT SSL问题。可以参考引用\[3\]中提到的关键词,如小程序反向代理解决mqtt ssl问题,来获取更多关于使用反向代理的信息。 需要注意的是,具体的解决方法可能因为不同的情况而有所不同。建议根据具体的需求和环境,选择适合的解决方案来实现微信小程序中的MQTT上线功能。 #### 引用[.reference_title] - *1* [微信小程序使用MQTT.JS中遇到的问题](https://blog.csdn.net/c519299013/article/details/127624143)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [解决微信小程序MQTT真机连接问题与合法域名配置SSL问题](https://blog.csdn.net/qq_35230125/article/details/124960889)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨之清风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值