微信小程序MQTT客户端的坑

原文链接:https://segmentfault.com/a/1190000012865251

前方:
微信小程序界面之类的,如果功能不是很复杂的话,开发起来其实还是挺简单的,但是比较坑的是他的安全机制。首先你需要有自己的域名,你的域名需要备案,备案的话一般要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/...

展开阅读全文

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