微信小程序整合MQTT

本文整理微信小程序整合MQTT开发所需要步骤,欢迎围观.

MQTT Broker

杭州一家公司开发的EMQX,部署非常简单,功能强大.目前评估了免费版本功能还够用.

https://www.emqx.io/cn/downloads

JS客户端库

一个非常强大的千星+的MQTT js客户端,

Github: https://github.com/mqttjs/MQTT.js

很贴心还提供了CDN:

https://unpkg.com/mqtt@3.0.0/dist/mqtt.min.js

https://unpkg.com/mqtt@3.0.0/dist/mqtt.js

微信小程序开发环境

微信开发工具设置

下载个VS Code吧...微信开发工具体验实在是抱歉.微信开发工具只作为调试工具使用.

https://code.visualstudio.com/Download

使用Linux的朋友推荐wxdt,体验非常不错, 记得装wine啊,不然是没法调试的.

https://github.com/cytle/wechat_web_devtools

开发环境把"不要验证域名..."勾上,绕开云服务器,域名,证书这些部署才需要的东西.

引入MQTT.js

从上面的CDN下载拷贝里面的代码一个到小程序项目下/utils/mqtt.js

MQTT小样

依赖

var mqtt = require('../../utils/mqtt.js');
//一个全局变量...
var client = null;

创建连接

重点注意一下options里面的那个port,没人告诉你估计得扑腾一会.mqtt.js默认会通过443端口建立Web Socket连接,如果你像我一样用的是EMQX那么你需要指定端口.

协议用wx(ws)就好了,毕竟实在开发机调试用的先别搞那么复杂的.

connectMqtt: function() {
        const options = {
            connectTimeout: 4000, // 超时时间
            clientId: 'wx_' + parseInt(Math.random() * 100 + 800, 10),
            port: 8083,  //重点注意这个,坑了我很久
            // username: 'xxx',
            // password: 'xxx',
        }
 
        client = mqtt.connect('wx://{你的IP地址}/mqtt', options)
        client.on('reconnect', (error) => {
            console.log('正在重连:', error)
        })

        client.on('error', (error) => {
            console.log('连接失败:', error)
        })

        let that = this;
        client.on('connect', (e) => {
            console.log('成功连接服务器')
　　　　　　　//订阅一个主题
            client.subscribe('message.queue', {
                qos: 0
            }, function(err) {
                if (!err) {
                    console.log("订阅成功")
                }
            })
        })
        client.on('message', function (topic, message) {
            console.log('received msg:' + message.toString());
        })
    },

如果上一步你可以连接上,那么恭喜你双向发送消息啦~

client.publish('message.queue', 'Hello MQTT')

微信部署

微信小程序上线比较严格,你的域名需要通过实名认证,还需要备案.所有的连接需要ssl加密,而且必须是认证的ca颁发的证书,如果用的是自己生成的会拒绝访问.

所以你需要走完这个流程: 开通云服务器->买域名->备案->买证书(阿里云有个人免费的symantec,有效期一年)->部署

MQTT Broker要开通加密Web Socket

到这里假设上面提到的你都办好了,下载证书.有很多个针对不同类型服务的证书,这里只需要下载apache那个就好了.

下载好解压出来你会得到两个文件,***.key和***_public.crt

设置wss

listener.wss.external.keyfile = etc/certs/{你的域名}.key
listener.wss.external.certfile = etc/certs/{你的域名}_public.crt

顺便把tcp的ssl也设置了

listener.ssl.external.keyfile = etc/certs/{你的域名}.key
listener.ssl.external.certfile = etc/certs/{你的域名}_public.crt

重启服务,你可以通过EMQX的工具测试连接

如果配置无误那么点击connect按钮会显示已连接.

修改一下连接MQTT的代码

EMQX默认wss端口为8084,把之前的8083改为8084.

把IP地址换成域名,必须备案.

上线需要使用wss协议,所以这里把服务器协议改为wxs(wss,wxs的MQTT.js定的别问我).

connectMqtt: function() {
        const options = {
            connectTimeout: 4000, // 超时时间
            clientId: 'wx_' + parseInt(Math.random() * 100 + 800, 10),
            port: 8084,  //重点注意这个,坑了我很久
            // username: 'xxx',
            // password: 'xxx',
        }
 
        client = mqtt.connect('wxs://{你的域名}/mqtt', options)
        client.on('reconnect', (error) => {
            console.log('正在重连:', error)
        })

        client.on('error', (error) => {
            console.log('连接失败:', error)
        })

        let that = this;
        client.on('connect', (e) => {
            console.log('成功连接服务器')
　　　　　　　//订阅一个主题
            client.subscribe('message.queue', {
                qos: 0
            }, function(err) {
                if (!err) {
                    console.log("订阅成功")
                }
            })
        })
        client.on('message', function (topic, message) {
            console.log('received msg:' + message.toString());
        })
    },

转载请注明出处:https://www.cnblogs.com/keitsi/p/12571383.html