【微信小程序控制硬件第1篇 】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！
【微信小程序控制硬件第2篇 】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！
【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
【微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程，esp8266如何自定义回调参数给微信，实现绑定设备第一步！
【微信小程序控制硬件第5篇 】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，在微信小程序多页面同时接收到设备推送事件！
【微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK，把用户自定义设备图片存储在第三方服务器！
【微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为自己心里全栈工程师梦想浇水！！
【微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！
【微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
【微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程！！
【微信小程序控制硬件 第11篇 】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度开关。

---

---

一、前言；

---

            今天是6月12号，高考过完刚刚不久，我也想起五年前那个夏天了。虽没有汗流浃背备考，但也有面对未来的种种幻想以及迷茫。

            回想到现在工作了，自己学到的东西很多，还真的应了课本的一句话 “人的一生都是在学习中！学习如逆水行舟，不进则退！”，当我看到身边的一些人懒懒散散的，看博文学习不动手做小项目，我的心是有点 “嫌弃”的，我也希望在一个优秀的团队，可以彼此进步，不管是大型企业或者小公司！当身边的人优秀，你也会一定反思自己，有所行动。

            感悟最深的是 ”学会投资自己“ ，不管在生活的衣食住行中，买些舒服的衣服，抑或是每天每周做些美食犒劳自己，还是在职业生涯中，买教程，买课本，消化知识，提升自己。总结我在网上买了几乎几千块的视频，其中也有些乏味的教学视频，也有很多实实在在的干货，的确耐人寻味，那是一种心灵上的快心。

---

二、微信小程序 websocket；

---

            微信小程序都不陌生了，一句话：依靠在微信客户端的一个小程序，其开发语言不是原生的，而是采用 html+JavaScript+css 这样类似的前端代码，接近原生体验！

            既然是一种类似 ”寄生虫“ 附属在微信客户端 ”宿主“ 里生存，那就不得不按照 ”宿主“ 的生存习惯，所以必须对于在微信小程序上实现 websocket连接阿里云IOT物联网平台服务器，那就必须遵循以下重要的准则：

1. 连接的端口号必须是 443 ，必须是 https协议；这里采用原生的即可。
2. websocket之上再实现 mqtt 协议数据发送和接受，即可实现以 mqtt 协议通讯；而我这里采用的是这个很出名的库：https://github.com/mqttjs/MQTT.js 来实现对数据的处理。

---

三、阿里云IOT物联网平台 websocket；

---

            阿里云IOT物联网平台支持基于WebSocket的MQTT协议。您可以首先使用WebSocket建立连接，然后在WebSocket通道上，使用 MQTT 协议进行通信，即MQTT over WebSocket！

1. 证书准备。

            WebSocket可以使用ws和wss两种方式，ws就是普通的WebSocket连接，wss就是增加了TLS加密。如果使用wss方式进行安全连接，需要使用和TLS直连一样的根证书。而我本次提供给大家的不需要根证书的。

2. 连接说明：

   使用WebSocket方式进行连接，区别主要在MQTT连接URL的协议和端口号，MQTT连接参数和TCP直接连接方式完全相同，其中要注意securemode参数，使用wss方式连接时securemode=2，使用ws方式连接时 securemode=3。

   • 连接域名（服务器地址），华东2节点（即上海节点）：
     ${YourProductKey}.iot-as-mqtt.cn-shanghai.aliyuncs.com:443

     其中 ${YourProductKey} 是个变量，请替换为您的产品key。

     Connect指令中需要设置 Keep Alive（保活时间）。保活心跳时间取值范围为30至1200秒。如果心跳时间不在此区间内，物联网平台会拒绝连接。建议取值300秒以上。如果网络不稳定，将心跳时间设置高一些。

     设备端在保活时间间隔内，至少需要发送一次报文，包括 PING 请求。

     如果物联网平台在保活时间内无法收到任何报文，物联网平台会断开连接，设备端需要进行重连。

   • MQTT连接参数参数如下：

     
     mqttClientId: clientId+"|securemode=3,signmethod=hmacsha1,timestamp=132323232|"
     mqttUsername: deviceName+"&"+productKey
     mqttPassword: sign_hmac(deviceSecret,content)sign签名需要把以下参数按字典序排序后，再根据signmethod加签。
     content=提交给服务器的参数（productKey,deviceName,timestamp,clientId）, 按照字母顺序排序, 然后将参数值依次拼接
     

     其中，

     • clientId：表示客户端ID，建议mac或sn，64字符内。
     • timestamp：表示当前时间毫秒值，可选。
     • mqttClientId：格式中||内为扩展参数。
     • signmethod：表示签名算法类型。
     • securemode：表示目前安全模式，可选值有2 （wss协议）和3（ws协议）。
       参考示例，如果预置前提如下：

   clientId = 12345，deviceName = device， productKey = pk， timestamp = 789，signmethod=hmacsha1，deviceSecret=secret
   

   • 使用ws方式

     • 连接域名

       ws://pk.iot-as-mqtt.cn-shanghai.aliyuncs.com:443
       

     • 连接参数

       
       mqttclientId=12345|securemode=3,signmethod=hmacsha1,timestamp=789|
       mqttUsername=device&pk
       mqttPasswrod=hmacsha1("secret","clientId12345deviceNamedeviceproductKeypktimestamp789").toHexString(); 
       

   • 使用wss方式

     • 连接域名

       wss://pk.iot-as-mqtt.cn-shanghai.aliyuncs.com:443
       

     • 连接参数

       mqttclientId=12345|securemode=2,signmethod=hmacsha1,timestamp=789|
       mqttUsername=device&pk
       mqttPasswrod=hmacsha1("secret","clientId12345deviceNamedeviceproductKeypktimestamp789").toHexString();
       

---

四、如何移植和封装使用；

---

            因为我做过设备端的 Mqtt协议连接阿里云物联网平台，对协议比较熟悉，所以对于怎么实现在微信小程序上是非常简单的。

            上面已经详细地说明了阿里云物联网平台 websocket 的协议，那么总的来说就是一个 加密算法，因为我之前已经开源了一个在微信小程序上实现 Mqtt协议连接服务器，这只要拿到了连接的一些参数，那就不成问题了！

            上面反复提到 hmacsha1 加密算法，那我就去找一个呗。还好，去官网 GitHub找了一个：点击访问 , 拿到了加密算法文件，按照上面说明，分别生成：mqttclientId、mqttUsername、mqttPasswrod、port端口号、url域名，就可以实现链接啦！

---

4.1 为了简单实用，降低耦合，我一度封装起来生成的算法，其封装源码如下：

exports.getAliyunIotMqttClient = function(opts) {//是否传入三元组if (!opts || !opts.productKey || !opts.deviceName || !opts.deviceSecret) {throw new Error('options need productKey,deviceName,deviceSecret');}if (opts.protocol === 'mqtts' && !opts.ca) {throw new Error('mqtts need ca ');}//是否传入区域if (!opts.host && !opts.regionId) {throw new Error('options need host or regionId (aliyun regionId)');}const deviceSecret = opts.deviceSecret;delete opts.deviceSecret;let secureMode = (opts.protocol === 'mqtts') ? 3 : 2;var options = {productKey: opts.productKey,deviceName: opts.deviceName,timestamp: Date.now(),clientId: Math.random().toString(36).substr(2)}let keys = Object.keys(options).sort();// 按字典序排序keys = keys.sort();const list = [];keys.map((key) => {list.push(`${key}${options[key]}`);});const contentStr = list.join('');//加密算法生成 passwordopts.password = crypto.hex_hmac_sha1(deviceSecret, contentStr);opts.clientId = `${options.clientId}|securemode=${secureMode},signmethod=hmacsha1,timestamp=${options.timestamp}|`;opts.username = `${options.deviceName}&${options.productKey}`;opts.port = opts.port || 1883;//生成域名opts.host = opts.host || `${opts.productKey}.iot-as-mqtt.${opts.regionId}.aliyuncs.com`;return (opts); //返回给上层
}

---

4.2 如何使用呢?

---

            非常简单，只需要调用 getAliyunIotMqttClient(option) 传进一些参数即可获取全部东西；

            option 对象的定义如下：

参数	含义
productKey	三元组信息 productKey
deviceName	三元组信息 deviceName
deviceSecret	三元组信息 deviceSecret
regionId	可选域，目前国内仅支持上海，所以是 cn-shanghai
port	443 不可修改，唯一！

---

            返回的对象的定义如下：

参数	含义
clientId	连接参数
password	连接参数
username	连接参数
host	连接的域名

• 示范：

data: {aliyunInfo: {productKey: 'a1o3SXAACTs23', deviceName: 'rgb2812',deviceSecret: 'RurAqmlt0duwMilKv6Oa856WDcQ279685a', regionId: 'cn-shanghai', }}var that = this//传进去三元组等信息，拿到mqtt连接的各个参数let clientOpt = aliyunOpt.getAliyunIotMqttClient({productKey: that.data.aliyunInfo.productKey,deviceName: that.data.aliyunInfo.deviceName,deviceSecret: that.data.aliyunInfo.deviceSecret,regionId: that.data.aliyunInfo.regionId,port: that.data.aliyunInfo.port,});//得到连接域名let host = 'wxs://'+clientOpt.host;this.setData({'options.clientId': clientOpt.clientId,'options.password': clientOpt.password,'options.username': clientOpt.username,})//开始连接this.data.client = mqtt.connect(host, this.data.options);this.data.client.on('connect', function(connack) {wx.showToast({title: '连接成功'})})

---

五、其他；

---

            看起来是不是非常简单呢？对的，下面我已经传到了我 GitHub 仓库了，欢迎大家给个星星啦！是对我最大的支持！ 我将一直维护：https://github.com/xuhongv/WeChatMiniEsp8266

            更多的使用技巧，你需要具备一定的微信小程序开发经验哦！结合我的代码，让你轻松连接阿里云IOT物联网平台！与你共勉！！

---

• 很多人怎么联系我一起学习进步，下面打个小小公告和干货无偿分享：

玩转esp8266 & esp32带你飞、加群付费QQ群，干货多多，提供免费Mqtt服务器，提高门槛，不喜的朋友勿喷勿加：434878850
esp8266源代码免费学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
esp32源代码免费学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32