WeChat applet MQTT client pit

Front:
WeChat applet interface and the like, if the function is not very complicated, it is actually quite simple to develop, but the more pitfall is his security mechanism. First of all, you need to have your own domain name. Your domain name needs to be filed. It usually takes about 20 days to file, and your own server must support https. Therefore, I asked Tencent Cloud to buy a domain name, bought a server, filed, etc. for more than 20 days, but it cost a lot of money, this is only the first pit.

Applet MQTT client:
The applet MQTT client supports the use of paho-mqtt.js . You can find the source code on github. For how to use it, you can check the examples contained in the source code. In general, it is not very complicated. But after getting it right, the interface is as follows:

Those who have used MQTT can choose the port and server address, and user name and password authentication are optional. So after I fill it out. The connection error is as follows:

According to the prompt, my domain name is not in the list of legal domain names, but I am sure that it has been configured and the applet project has been refreshed. I will still be prompted with this error.

Solution:
Because the small program uses wss to communicate, the default is port 443. You do n’t need to specify the port yourself. You can use the bottom way in the picture below to access.

Those who have used EMQ should know that the tcp port is 1883, the ssl port is 8883, the ws port is 8083, and the wss port is 8084, but these ports cannot be used for access now. As follows:

EMQ server setup:

The construction of the EMQ service is actually not complicated. You can refer to the official documentation for installation. I am using the general version of Linux. Here I should pay attention to the setting of the SSL certificate. One of my questions is mentioned . If you are interested, you can take a look.

To solve the above problem, Nginx is used here for reverse proxy. The installation of Nginx is not very complicated, but if you use the source code installation, you must install the dependent libraries before installation, you can refer to: ubuntu16.04 nginx installation . In addition, we need to add a more_clear_headers module, you can refer to: openresty / headers-more-nginx-module

Next is the configuration of Nginx, which mainly configures SSL and reverse proxy, and performs the following configuration:

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";
        }
}

Replace the above domain name and certificate with your own domain name and certificate, pay attention to the path of the certificate. In addition, the new 8084 port (wss) and 8083 port (ws) can be used, but when using 8084 port above, use https. Now you can complete the communication between the applet MQTT client and the EMQ server.
Thanks to the wxapp author for his guidance.

Reference:
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 / ...