【如何实现在微信公众号配网到控制硬件esp8266 ⑧】如何在微信公众号网页实现连接mqtt服务器教程！

【微信小程序控制硬件第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，实现无需网络也可以控制亮度开关。

---

---

一、前言；

---

         昨天是教师节，也是阿里巴巴的董事长 马云退休一天， 也是苹果11发布会的一天，可谓是 热闹非凡！

         看了看《今日头条》的许多关于阿里巴巴的奉献，其中 扫码支付竟然是我们中国发明的！！就是阿里人！常言说道，马云是各大银行的对手，解决了出门不带银行卡，出门不带现金的问题！确实，我记得我之前读书时候，都是拿着银行卡去超市刷卡！很担心银行卡密码被盗！记得有一次取款时候，发现前面的一个学生在AMT机未取出卡就走了，我就叫了他回来，这种事情真担心；

         这篇博文序列一直是笔记着微信小程序连接mqtt服务器，做一些控制硬件的事情。今天，我分享一篇在 微信公众号网页实现连接mqtt服务器教程；

         虽然网页端移动端的体验没有像小程序那么好，但是适合网页前端开发的朋友快速开发。

         因为目前的 esp8266 这样的wifi或者ble设备，在 公众号上配网是较为成熟了，以此同时，微信小程序和微信公众号的用户体系是不一样的，从开发者角度来说，就是2者获取的 openID 不一样，但是有一种解决方法，就是开通微信开放平台获取 unionId ，这个字段是一个微信用户在微信产品中唯一的；或者其他思路：通过自己服务器开发用户管理实现 微信公众号和微信小程序用户统一！

         很遗憾的是，这个微信开放平台仅仅支持面向 企业公司开放接入，不支持个人开发者。因此，我觉得在微信公众号上实现 从配网到控制 esp8266 这样到设备，还是很有前景的！

---

二、原理；

---

         本博文可能字数较少，因为难度不大，易操作，勿喷！有问题留言！

         微信公众号打开的页面都是 html 页面，因此想在 html 页面连接 mqtt 服务器，务必用 websocket 通讯协议，这个也是一种长连接，很多 微信小程序小游戏都是用这个开发聊天室之类的；

---

三、准备材料；

---

1. 前端到 mqtt 连接库：从我到Github仓库获取 https://github.com/xuhongv/WeChatMiniEsp8266 ，文件名是 mqtt.js 。
2. Mqtt 服务器准备一个，我采用到是 EMQ 开源的，已经反向代理了 443端口到 8083 端口，教程在第一篇或者我到 b站教学视频；
3. 微信公众号一个，请自行设置安全域名等操作；
4. 这个连接库是从 https://github.com/mqttjs/MQTT.js 拿到的哈！更多使用技巧自己查询，下面给出最常见的使用方法！

---

四、过程；

---

• 1 引进 js文件，注意自己的路径；

  <script type="text/javascript" src="__STATIC__/mqtt/mqtt.js"></script>

• 2 定义连接配置；

 let options = {
        protocolVersion: 4, //MQTT连接协议版本
        clean: false,
        reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
        connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
        resubscribe: true, //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
        clientId: 'html',
        password: 'admin',
        username: 'admin',
    };

• 3 连接：这里注意是 443 端口，因为我这个服务器也是适合微信小程序连接它的，而且后面加个 mqtt 表示路径，因为我的 nginx.conf 配置文件定义了；

  let mqttClient = mqtt.connect('wss://www.domain.cn:443/mqtt',options);

• 4 连接异常等操作这里都有回调；

    //服务器连接成功'的回调
    mqttClient.on('connect', function(connack) {
      //连接成功'
     })

    //服务器连接异常的回调
    mqttClient.on("error", function (error) {
        console.log(" 服务器 error 的回调" + error)

    })

    //服务器重连连接异常的回调
    mqttClient.on("reconnect", function () {
        console.log(" 服务器 reconnect的回调")

    })
    //服务器连接异常的回调
    mqttClient.on("offline", function (errr) {
        console.log(" 服务器offline的回调")
    })

• 5 订阅主题：

   mqttClient.subscribe('Topic0', function(err, granted) {
        if (!err) {
          //订阅主题成功
        } else {
          //订阅主题失败
        }
      })
    } 

• 5 发布消息：

   clientMqtt.publish('/World','rgb')

• 6 虽然有掉线，但是会重连服务器，不错！

---

四、最后；

---

另外，不要把我的博客作为学习标准，我的只是笔记，难有疏忽之处，如果有，请指出来，也欢迎留言哈！

• 玩转esp8266带你飞、加群付费QQ群，不喜的朋友勿喷勿加：434878850
• esp8266源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
• esp32源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32
• 关注下面微信公众号二维码，干货多多，第一时间推送！