软件开发教程 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试
游戏开发 网络协议 系统运维 HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程
C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
 
   -> 移动开发 -> **微信小程序整合MQTT** -> 正文阅读

[移动开发]**微信小程序整合MQTT**

微信小程序整合MQTT
本文整理微信小程序整合MQTT开发所需要步骤和注意事项.

在本文的第一版时已经使用多终端测试过功能是OK的,没想到上线时却发现Android端不可用有点摸不着头脑……多想无益只能继续探索……好在微信社区论坛找到了一些相同的案例,借用各位的思路重新调整了一下文章。本文并没有把原文删除,而是在最后追加一章,为了记录历史过程。

参考:

https://developers.weixin.qq.com/community/develop/doc/000c226e034c8843276ae477f52800?_at=1602948590825

https://blog.csdn.net/weixin_42306858/article/details/95307967

下载以下组件
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

Nginx
web服务器,本文用于反向代理。

http://nginx.org/en/download.html

微信小程序开发环境
微信开发工具设置
下载个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;

创建连接
注意:实测以下配置仅在模拟器中或IOS真机中有效,对于Android真机并不起作用。

重点注意一下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的工具测试连接 emqx restart

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

修改一下连接MQTT的代码
注意:实测以下配置仅在模拟器中或IOS真机中有效,对于Android真机并不起作用。

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());
        })
    },

解决 Android真机无法连接MQTT Broker问题
下载一个Nginx版本的证书,给Nginx加一个新的Server,监听端口443并代理转发EMQX的8083端口。

需要你根据实际情况修改的地方:

设置域名
设置证书
**server {
server_name www.{your domain}.cn;
listen 443 ssl;
ssl_certificate {path to cert}.pem;
ssl_certificate_key {path to cert key}.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 /mqtt {
    proxy_pass http://localhost:8083;
    proxy_redirect off;
    proxy_set_header Host localhost:8083;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

}**
配套JS代码:

connectMqtt: function() {
        const options = {
            connectTimeout: 4000, // 超时时间
            clientId: 'wx_' + parseInt(Math.random() * 100 + 800, 10),
            // 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());
        })
    },

OK,

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

  移动开发 最新文章
Android开发中recycleview子项宽度无法撑满
2021-07-24
【Kotlin】kotlin中的空指针检查
多种网络请求方式 ,这么骚气的操作确定不来
营销运作百科:什么是小程序,小程序的发展
Android - 禁用权限后,进程被杀?
Flutter WebView使用以及分析
Android 播放帧动画2
[android驱动] Ftrace使用记录
Unity(C#)和Android(java)通过反射相互调用
上一篇文章           查看所有文章
加:2021-07-17 12:03:47  更:2021-07-17 12:06:19 
 
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年7日历 -2021/7/27 2:50:28-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件开发教程