本文链接： https://blog.csdn.net/xh870189248/article/details/100738444

【微信小程序控制硬件第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发布会的一天，可谓是热闹非凡！

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

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

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

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

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

二、原理；

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

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

三、准备材料；

前端到 mqtt 连接库：从我到Github仓库获取 https://github.com/xuhongv/WeChatMiniEsp8266 ，文件名是 mqtt.js 。
Mqtt 服务器准备一个，我采用到是 EMQ 开源的，已经反向代理了 443端口到 8083 端口，教程在第一篇或者我到 b站教学视频；
微信公众号一个，请自行设置安全域名等操作；
这个连接库是从 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
关注下面微信公众号二维码，干货多多，第一时间推送！

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