Uniapp/Vue MQTT示例（H5、小程序、APP），踩坑日记

首先安装mqtt，建议使用较为稳定的3.0.0版本

npm install [email protected]

引入mqtt

import mqtt from 'mqtt/dist/mqtt.js';

发起订阅，示例代码：

  1. connect() {  
  2.     var self = this  
  3.     var subscribe = "test"
  4.     let options = {  
  5.         clientId:'client_' + Math.random().toString(16).substr(2, 8),  
  6.         connectTimeout: 10000,  
  7.         clean: true  
  8.     }
  9.     // #ifdef H5  
  10.     // 此处的端口为mqtt.js中的http端口，否则H5和手机连接不上mqtt服务器  
  11.     var client = mqtt.connect('ws://127.0.0.1:8888/mqtt',options)  
  12.     // #endif
  13.  
  14.     // #ifdef MP-WEIXIN||APP-PLUS  
  15.     // 此处需要改成你的主机ip，并保证测试手机跟你的电脑处于同一个局域网  
  16.     var client = mqtt.connect('wx://xxx.xxx.x.xxx:8888/mqtt',options)  
  17.     // #endif
  18.  
  19.     client.on('connect', function(res) {  
  20.         uni.showToast({  
  21.             title:"连接成功",  
  22.             duration:2000,  
  23.             icon:"none"  
  24.         })  
  25.         client.subscribe(subscribe, function(err) {  
  26.             if (!err) {  
  27.                 uni.showToast({  
  28.                     title:"订阅成功",  
  29.                     duration:2000,  
  30.                     icon:"none"  
  31.                 })  
  32.             }  
  33.         })  
  34.     }).on('message', function(topic, message) {  
  35.         console.log(JSON.parse(message.toString()))  
  36.     }).on('reconnect', function(topic, message) {  
  37.         console.log("重连")  
  38.     })  
  39. }

值得注意：

1、clientId不能重复，可生成随机数作为clientId；

2、使用条件编译，浏览器环境使用ws://，微信小程序及APP使用wx://，查看源码发现这个库是通过ws和wx来判断是否是浏览器环境，浏览器环境用WebSocket对象，非浏览器环境connectSocket

 并没有wx协议，只是这样区分平台而已；

3、import的时候要引入dist下的mqtt，至于为什么也是很迷惑；

4、如果在H5上正常连接，到模拟器或真机上就一直重连，可检查mqtt版本是否为3.0.0，连接地址前缀是否为wx://，HBuiderX版本是否为3.7.3以上（真实经历，困扰了好几天，一直找不到原因，网上各种方法都试过，最后更新了HBuiderX版本，重新编译运行，就...好了，连接上了...）；

首先安装mqtt，建议使用较为稳定的3.0.0版本

npm install [email protected]

引入mqtt

import mqtt from 'mqtt/dist/mqtt.js';

发起订阅，示例代码：

  1. connect() {  
  2.     var self = this  
  3.     var subscribe = "test"
  4.     let options = {  
  5.         clientId:'client_' + Math.random().toString(16).substr(2, 8),  
  6.         connectTimeout: 10000,  
  7.         clean: true  
  8.     }
  9.     // #ifdef H5  
  10.     // 此处的端口为mqtt.js中的http端口，否则H5和手机连接不上mqtt服务器  
  11.     var client = mqtt.connect('ws://127.0.0.1:8888/mqtt',options)  
  12.     // #endif
  13.  
  14.     // #ifdef MP-WEIXIN||APP-PLUS  
  15.     // 此处需要改成你的主机ip，并保证测试手机跟你的电脑处于同一个局域网  
  16.     var client = mqtt.connect('wx://xxx.xxx.x.xxx:8888/mqtt',options)  
  17.     // #endif
  18.  
  19.     client.on('connect', function(res) {  
  20.         uni.showToast({  
  21.             title:"连接成功",  
  22.             duration:2000,  
  23.             icon:"none"  
  24.         })  
  25.         client.subscribe(subscribe, function(err) {  
  26.             if (!err) {  
  27.                 uni.showToast({  
  28.                     title:"订阅成功",  
  29.                     duration:2000,  
  30.                     icon:"none"  
  31.                 })  
  32.             }  
  33.         })  
  34.     }).on('message', function(topic, message) {  
  35.         console.log(JSON.parse(message.toString()))  
  36.     }).on('reconnect', function(topic, message) {  
  37.         console.log("重连")  
  38.     })  
  39. }

值得注意：

1、clientId不能重复，可生成随机数作为clientId；

2、使用条件编译，浏览器环境使用ws://，微信小程序及APP使用wx://，查看源码发现这个库是通过ws和wx来判断是否是浏览器环境，浏览器环境用WebSocket对象，非浏览器环境connectSocket

 并没有wx协议，只是这样区分平台而已；

3、import的时候要引入dist下的mqtt，至于为什么也是很迷惑；

4、如果在H5上正常连接，到模拟器或真机上就一直重连，可检查mqtt版本是否为3.0.0，连接地址前缀是否为wx://，HBuiderX版本是否为3.7.3以上（真实经历，困扰了好几天，一直找不到原因，网上各种方法都试过，最后更新了HBuiderX版本，重新编译运行，就...好了，连接上了...）；

注：本文转载自blog.csdn.net的苡然_的文章"https://blog.csdn.net/LFQP_/article/details/131134830"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！