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

时间 2020-07-22 标签如何如今微信公众号控制硬件 esp8266 esp 网页实现链接 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，实现无需网络也能够控制亮度开关。javascript

文章目录

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

文章目录

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

1、前言；

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

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

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

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

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

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

2、原理；

本博文可能字数较少，由于难度不大，易操做，勿喷！有问题留言！web

微信公众号打开的页面都是 html 页面，所以想在 html 页面链接 mqtt 服务器，务必用 websocket 通信协议，这个也是一种长链接，不少微信小程序小游戏都是用这个开发聊天室之类的；面试

3、准备材料；

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

4、过程；

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 虽然有掉线，可是会重连服务器，不错！

4、最后；

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

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