微信小程序MQTT客户端的坑

前方:
微信小程序界面之类的,如果功能不是很复杂的话,开发起来其实还是挺简单的,但是比较坑的是他的安全机制。首先你需要有自己的域名,你的域名需要备案,备案的话一般要20天左右,而且你自己的服务器要支持https。所以,我要腾讯云买了域名,买了服务器,备案等等搞了20多天,钱倒是花了不少,这还只是第一坑。

小程序MQTT客户端:
小程序的MQTT客户端支持使用的是paho-mqtt.js,可以在github上面找到源码,怎么使用的话可以查看源码里面包含的例子,总的来说并不是很复杂。但是弄好之后,界面如下:

clipboard.png

用过MQTT的知道可以选择端口和服务器地址,还有用户名密码认证是可选的。所以我填好之后。连接错误如下:

clipboard.png
按照提示说,我的域名没有在合法域名列表中,但是我确定是已经配置好了的,而且小程序项目也已经刷新了,还是会提示这个错误。

解决方法:
因为小程序是使用wss进行通信,默认使用的是443端口,不用自己指定端口,可以使用下面图片中最下方的方式进行访问。

clipboard.png
用过EMQ的应该知道,tcp端口为1883,ssl端口为8883,ws端口为8083,wss端口为8084,但是现在不能使用这些端口进行访问。如下所示:

clipboard.png

EMQ服务器搭建:

EMQ服务的搭建其实并不复杂,可以参照官方文档进行安装,我使用的是Linux的通用版本,这里要注意的是SSL证书的设置,我的一个问题有提到,有兴趣的可以看看。

要解决上面的问题,这里使用Nginx进行反向代理。Nginx的安装也不是很复杂,但是使用源码安装的话,安装之前要安装好依赖库,可以参照: ubuntu16.04 nginx安装。另外,还要添加一个 more_clear_headers 模块,可以参照:openresty/headers-more-nginx-module

接下来是Nginx的配置,主要配置SSL和反向代理,进行如下配置:

server {
    listen 443;
    server_name www.domain.com; #填写绑定证书的域名
    
    ssl on;
    ssl_certificate certs/1_www.domain.com_bundle.crt;
    ssl_certificate_key certs/2_www.domain.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置
    ssl_prefer_server_ciphers on;

    location / {
        root   html; #站点目录
        index  index.html index.htm;
    }

    location = /mqtt {
        proxy_pass http://www.domain.com:8083;
        proxy_redirect off;
        proxy_set_header Host www.domain.com:8083;

        proxy_set_header Sec-WebSocket-Protocol mqtt;
        more_clear_headers Sec-WebSocket-Protocol;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        }
}

上面域名和证书之类的替换为你自己的域名和证书,注意证书的路径。另外,新测8084端口(wss)和8083端(ws)都可以,不过上面用8084端口时要用https。现在已经可以完成小程序MQTT客户端与EMQ服务器的通信了。
感谢wxapp作者的交流指导。

参考:
https://github.com/tennessine...
http://emqtt.com/docs/v2/inst...
http://www.cnblogs.com/badboy...
http://www.cnblogs.com/badboy...
https://github.com/openresty/...
https://zhuanlan.zhihu.com/p/...

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要连接 MQTT 服务器,可以使用第三方 MQTT 客户端库,如 Paho MQTT JS 库。在微信小程序中,可以使用小程序的 WebSocket API 建立 WebSocket 连接,然后通过 WebSocket 连接实现 MQTT 协议的通信。 以下是建立 MQTT 连接的一些基本步骤: 1. 引入 Paho MQTT JS 库: 在小程序的页面中,可以通过引入 Paho MQTT JS 库来使用 MQTT 客户端功能。可以在页面的 .js 文件中添加以下代码: ```javascript import Paho from '../../utils/mqttws31.js' ``` 其中,'../../utils/mqttws31.js' 是 Paho MQTT JS 库的路径,需要根据实际情况进行调整。 2. 创建 MQTT 客户端实例: 可以在页面的 .js 文件中添加以下代码来创建 MQTT 客户端实例: ```javascript let client = null; function connectMqtt() { client = new Paho.MQTT.Client('mqtt://test.mosquitto.org', 8080, 'clientId-' + Math.random().toString(16).substr(2, 8)); client.connect({ useSSL: true, onSuccess: onConnect, onFailure: onFailure }); } ``` 其中,'mqtt://test.mosquitto.org' 是 MQTT 服务器的地址,8080 是端口号,'clientId-' + Math.random().toString(16).substr(2, 8) 是客户端的 ID,需要根据实际情况进行修改。 3. 连接到 MQTT 服务器: 可以在页面的 .js 文件中添加以下代码来连接到 MQTT 服务器: ```javascript function onConnect() { console.log('Connected to MQTT server'); client.subscribe('test/topic', { qos: 1 }); } ``` 其中,'test/topic' 是要订阅的 MQTT 主题,{ qos: 1 } 表示使用 QoS 等级为 1 进行订阅。 4. 发布消息到 MQTT 服务器: 可以在页面的 .js 文件中添加以下代码来发布消息到 MQTT 服务器: ```javascript function publishMqtt(message) { let topic = 'test/topic'; let qos = 1; let payload = message; let messageObj = new Paho.MQTT.Message(payload); messageObj.destinationName = topic; messageObj.qos = qos; client.send(messageObj); } ``` 其中,'test/topic' 是要发布消息的 MQTT 主题,payload 是发布的消息内容,qos 是消息的 QoS 等级。 通过以上步骤,就可以在微信小程序中连接到 MQTT 服务器,并进行消息的订阅和发布。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值