前言

MQTT.js npm包安装

1
npm install mqtt --save

版本 4.2.8


导入方式

1
import mqtt from "mqtt"

1
2
3
4
5
6
7
8
9
10
11
// #ifdef H5
	this.hosts = 'wss://' + this.basehost + ':8084/mqtt'
// #endif

// #ifdef MP-WEIXIN
	this.hosts = 'wxs://' + this.basehost + ':8084/mqtt'
//#endif

// #ifdef APP-PLUS
	this.hosts = 'wx://' + this.basehost + ':8083/mqtt'
//#endif

遇到的问题

uni-app 导入此包后微信小程序并不能正常连接服务器，但 H5 正常。

Snipaste_2021-10-04_10-35-06


调试

  1. 翻看 EMQX 文档 时无意发现，微信小程序接入需要使用 TLS/443 端口，作如下修改

    1
    2
    3
    // #ifdef MP-WEIXIN
    	this.hosts = 'wxs://' + this.basehost + '/mqtt'
    //#endif

    Nginx 配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    server {
        listen  443 ssl;        
        server_name xxx.com; 
        ssl_certificate   cert/***.pem;
        ssl_certificate_key  cert/***.key;
        ssl_session_timeout  5m;      
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        # 添加反向代理
        location /mqtt {
          proxy_pass http://127.0.0.1:8083/mqtt;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          # client_max_body_size 35m;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";    
        }

    }

    结果：依旧无法连接


  2. 查看 MQTT.js github 的 Issues，4.2.6版本时有人提问过，但不知道提问者具体情况（连接地址问题？js问题？微信问题？）

    image-20211004105056282

    结果：亲测失败


  3. 版本一直回退，直到 4.1.0，且导入方式修改

    1
    import mqtt from "mqtt/dist/mqtt.min.js"

    结果：连接成功


总结

整个过程话费了大量时间，虽然最后成功连接，但个人知识有限，具体原因未知。可能从 4.2.0 版本更新时修改了某些内容，需要查看包更新内容进行研究。