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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xh870189248/article/details/100738444

  • 本博文由热爱分享热爱技术的半颗心脏原创,非官方人员、非组织名义编写,博文如有不对或侵犯您的权益,请及时留言,第一时间纠正!

【微信小程序控制硬件①】 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件!
【微信小程序控制硬件②】 开始微信小程序之旅,导入小程序Mqtt客户端源码,实现简单的验证和通讯于服务器!
【微信小程序控制硬件③】 从软件到硬件搭建一个微信小程序控制esp8266的项目,自定义通讯协议,为面试职位和比赛项目加分!
【微信小程序控制硬件④】 深度剖析微信公众号配网 Airkiss 原理与过程,esp8266如何自定义回调参数给微信,实现绑定设备第一步!
【微信小程序控制硬件⑤ 进阶篇 】理清接下来必须走的架构思想,学习下 JavaScript 的观察者模式,在微信小程序多页面同时接收到设备推送事件!
【微信小程序控制硬件⑥ 进阶篇 】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
【微信小程序控制硬件⑦ 进阶篇 】巧借阿里云物联网平台的免费连接,从微信小程序颜色采集控制 esp8266 输出七彩灯效果,中秋节来个直播如何?!
【如何实现在微信公众号配网到控制硬件esp8266 ⑧ 】如何在微信公众号网页实现连接mqtt服务器教程!!


一、前言;


         昨天是教师节,也是阿里巴巴的董事长 马云退休一天, 也是苹果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
  • 关注下面微信公众号二维码,干货多多,第一时间推送!
展开阅读全文

没有更多推荐了,返回首页