• 微信小程序连接MQTT服务器全过程


    准备工作
    最近作比赛,需要用到物联网平台,对于实时的系统来说,mqtt透传是最好的选择,而微信小程序的开发成本又很低廉,所以最终决定使用微信小程序+MQTT服务器的方式来实现,其中也踩了不少坑,所以就此分享一下搭建项目的全过程。

    首先是需要准备的东西:

    一台服务器(我用的是腾讯云)
    SSL证书(必须品,腾讯云可以免费申请)
    域名(也是必须品,因为微信小程序会检测合法域名,不能直接挂IP)
    mqtt.js第三方库(后面会介绍怎么用)
    MQTT服务器搭建
    MQTT服务器搭建的过程请参考 :mqtt+ssl服务搭建以及ws+wss支持 这篇文章,我就是一路按照这篇博文搭建的服务器。

    证书选择
    下载的证书中可能含有阿帕奇、nginx等多个文件夹,部署MQTT服务器时使用的是阿帕奇(apache)文件中的

    证书不完整
    我从腾讯云申请的证书,后来在小程序测试时会发生开发者工具中可以正常使用,但是真机调试就不行(选不选检验合法域名都不行),其实是因为所颁发的证书不完整的原因,可以通过以下方法解决:

    进入SSL证书状态监测网站:https://myssl.com/ssl.html,输入自己的域名以及websocket+ssl的端口(按照上述文章是8081),点击监测。
    如果在降级原因中有证书链不完整的字样,那么请进入证书链修补工具:https://myssl.com/chain_download.html
    将生成的证书链复制替换原来三个文件中的第二个(2_www.qilv.group.crt)即可。
    重启服务器
    重启mqtt服务器可以使用如下方法:

    查看mosquitto 进程
    ps -aux | grep mosquitto
    杀死进程
    kill -9 15869
    重启
    mosquitto -c /etc/mosquitto/mosquitto.conf -d
    至此,服务器的搭建已经完成!
    微信小程序使用mqtt
    微信小程序使用mqtt是通过websocket来实现,需要用到mqtt.js这一个第三方库。

    mqtt.js下载
    由于微信小程序不支持CDN(可能支持,反正我是不能用),所以只能下载到你的项目里,地址:

    正常版:https://unpkg.com/mqtt@2.18.8/dist/mqtt.js
    mini版:https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js
    创建mqtt连接
    首先在app.js中,最上方(App({})的上方)添加代码:

    var mqtt = require("/utils/mqtt.js") //引入mqtt文件

    //随机生成字符串,因为clientId你设成一个固定字符串的话,当你编译
    代码的时候就会以这个ID连接服务器,当预览或者真机调试的时候还是这个
    ID,就会发生ID冲突的问题,当时差点被这个不起眼的BUG整疯
    function randomString(len) {
    len = len || 32;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = $chars.length;
    var pwd = '';
    for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
    }
    //连接配置
    const options = {
    connectTimeout: 4000, //超时时间
    clientId: randomString(30), //随机生成ID
    username: '', //用户名
    password: '', //密码

    接下来在App中添加小程序加载监听函数:

    onLaunch: function () {
    let that = this
    var client = mqtt.connect('wxs://www.xxx.email:8081', options) //你自己的域名
    client.on('connect', (e) => {
    console.log('成功连接服务器!')
    })
    client.subscribe('esp8266', {
    qos: 0
    }, function (err) {
    if (!err) {
    console.log("订阅成功:esp8266")
    }
    })
    client.on('message', function (topic, message, packet) {
    that.globalData.mqttData = packet.payload.toString()
    })

    这样,在全局变量中就储存了服务器发来的消息,其他页面均可读取消息:

    const app = getApp(); //引入全局变量
    Page({
    console.log(app.globalData.mqttData)
    }) 
    其他
    mqtt.js需要注意的地方
    var client = mqtt.connect('wxs://www.xxxx.email:8081', options) 
    使用时要注意 是wxs 而不是 wss,因为这个第三方库的作者进行了一次封装

    mqtt.js的其他地方
    请参考这片文章:在微信小程序中使用mqtt服务

    合法域名问题
    这个问题我也不太清楚,因为我一直没有勾选不检测合法域名的选项,现在补充一下如何添加合法域名:

    打开微信小程序控制台页面
    依次点击:开发-开发设置-服务器域名
    添加服务器地址 :www.xxx.email:8081;即可

    ————————————————
    版权声明:本文为CSDN博主「白白的昕」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_43554847/article/details/108587422

  • 相关阅读:
    数据加密标准(DES)详解(附源码)
    《ProGit》阅读笔记
    版本管理——Git和SVN的介绍及其优缺点
    jQuery-动画
    ajax与jsonp中的几个封装函数
    关于ajax
    js基础——数组的概念及其方法
    js实现放烟花效果——点击处会从下向上升起烟花
    js实现——鼠标移动时跟随着一连的小图片
    BFC的作用及其应用
  • 原文地址:https://www.cnblogs.com/javalinux/p/14469782.html
Copyright © 2020-2023  润新知