从EMQX模拟设备中发送数据到微信小程序

1、注册EMQX服务器

登录EMQX服务器官网EMQX Dashboard,注册自己的帐号和密码,点击“登录”。

2、找到WebSocket客户端

3、连接客户端

点击“连接”

4、复制自己的设置订阅主题“$thing/up/property/IQMPOB8BI9/temp/humi”,粘贴到EMQX的订阅和发布上

5、点击订阅

6、把以下代码复制到Payload

{ "temperture":"90","humidity":"90","longitude":"113.970473","latitude":"22.556992"}

7、点击发布

8、我们可以看到小程序收到了EMQX发送上来的数据了

这是我的代码,仅供参考:

const app = getApp()

var mqtt = require('../../utils/mqtt.min.js') //根据自己存放的路径修改

const appInstance = getApp();

Page({

  data: {

    motto: 'Hello World',

    userInfo: {},

    hasUserInfo: false,

    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    canIUseGetUserProfile: false,

    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false

    temperture:'0',

    humidity:'0',

    angle:'0',

    wl:'0',

    gas:'0',

    longitude:'0',

    latitude:'0',

  },

  onLoad(){

    this.doConnect()

    if (wx.getUserProfile) {

      this.setData({

        canIUseGetUserProfile: true

      })

    }

    this.setData({

        nbTitle: '设备参数',

        nbLoading: false,

        nbFrontColor: '#ffffff',

        nbBackgroundColor: '#D53e37',

      })

  },

   doConnect(){

    //如果你服务器开了连接验证,这里的参数要自己加上username和password等

    const options = {

      keepalive: 60, //60s

      clean: true, //cleanSession不保持持久会话

      protocolVersion: 4 ,//MQTT v3.1.1

      clientId:Math.random().toString(36).substr(2)

    };

    let url = "wx://www.visionexpand.com.cn:8083/mqtt";//这个地址是emq官方的公开免费地址,请换成自己服务器的地址

    const client = mqtt.connect(url,options)

    client.on('connect', function () {

      console.log('连接emqx服务器成功')

      client.subscribe('$thing/up/property/IQMPOB8BI9/temp/humi',{qos:2},function(err){

        if(!err)

            {console.log('订阅成功')}

      })

    })

    //接收消息监听

    client.on('message', (topic, message) => { 

      let msg=message.toString();

      const data=JSON.parse(msg);

       const timestamp = new Date().toISOString().substr(0, 19).replace('T', ' ');  

      console.log('温度:', data.temperture, '湿度:', data.humidity,'纬度:',data.longitude,'经度',data.latitude); 

  // 设置数据

  this.setData({  

    temperture: data.temperture,  

    humidity: data.humidity,

    longitude:data.longitude,

    latitude:data.latitude

  });

  })

}

})

<think>好的,我现在需要回答用户关于如何在微信小程序中集成MQTT协议的问题。首先,我需要回忆一下MQTT在微信小程序中的实现方法。根据用户提供的引用,特别是引用[1]提到使用onFire框架和weui框架,引用[2]提到uniapp开发规范,引用[3]则是一个具体的项目案例。这些信息可以帮助构建答案。 首先,微信小程序的原生环境可能不支持直接的MQTT连接,所以可能需要使用第三方库或者框架。用户提到的onFire框架可能是一个解决方案。需要确认这个框架的用法,以及是否兼容微信小程序。另外,引用[2]提到uniapp,这是一个跨平台开发框架,可能允许使用MQTT库,但需要遵循其开发规范。 然后,我需要考虑如何在代码层面实现。可能需要引入MQTT.js或者其变体,但微信小程序JavaScript环境有限制,比如没有Node.js的模块系统,所以可能需要使用适配后的版本,比如mqtt.min.js。同时,需要处理WebSocket连接,因为MQTT通常通过WS或WSS协议传输。 接下来,步骤可能包括安装或导入MQTT库、配置连接参数(如broker地址、端口、客户端ID等)、建立连接、订阅主题、处理消息接收和发送,以及错误处理。同时,需要注意微信小程序的网络请求必须使用HTTPS和WSS,因此broker必须支持SSL。 用户提供的引用中,引用[3]的项目使用了ESP32和微信小程序,这可能涉及到具体的topic结构和消息格式,但用户的问题更关注小程序端的集成,所以可能需要示例代码和关键步骤说明。 还需要考虑微信小程序的限制,比如同时只能有一个Socket连接,因此MQTT客户端需要管理好连接状态。此外,引用[1]提到的weui框架可能用于美化界面,这部分可以作为补充建议。 最后,生成相关问题需要考虑用户可能的后续疑问,比如连接稳定性、调试工具、安全性等,以及如何结合硬件如ESP32使用。</think>### 微信小程序集成MQTT协议实现消息推送教程 #### 一、技术选型要点 1. **MQTT协议库选择** 微信小程序原生环境不支持直接使用Node.js的`mqtt.js`库,需采用适配浏览器环境的版本,例如: - 使用`mqtt.min.js`(精简版,支持WebSocket传输) - 或通过`uniap`跨平台框架集成(需遵循开发规范[^2]) 2. **通信方式限制** 小程序要求网络请求必须为`wss`协议,需确保MQTT Broker支持WebSocket并配置SSL证书。例如: ```javascript const client = mqtt.connect('wss://broker.emqx.io:8084/mqtt', { clientId: 'miniProgram_' + Date.now() }); ``` #### 二、核心实现步骤 1. **引入MQTT库** 将适配后的`mqtt.min.js`文件放入小程序项目`utils`目录,并通过`const mqtt = require('./utils/mqtt.min.js')`导入。 2. **建立连接与订阅** ```javascript Page({ data: { connected: false }, onLoad() { const client = mqtt.connect('wss://broker.emqx.io:8084/mqtt', { clientId: 'miniProgram_' + Date.now() }); client.on('connect', () => { this.setData({ connected: true }); client.subscribe('fish_tank/temperature'); // 订阅鱼缸温度主题[^3] }); client.on('message', (topic, payload) => { console.log(`收到${topic}消息:`, payload.toString()); }); this.client = client; }, onUnload() { this.client.end(); // 页面关闭时断开连接 } }); ``` 3. **消息发布示例** ```javascript // 控制鱼缸灯光 publishLightCommand() { this.client.publish('fish_tank/light/control', 'ON'); } ``` #### 三、关键问题解决 1. **连接稳定性** - 通过`onClose`事件监听连接中断并实现重连逻辑 - 使用心跳包保持长连接(MQTT协议自带`keepalive`参数) 2. **界面交互优化** 使用`weui`框架美化控制界面,例如按钮组件: ```html <view class="weui-btn-area"> <button class="weui-btn" type="primary" bindtap="publishLightCommand">开关灯光</button> </view> ``` 3. **跨平台开发方案** 通过`uniapp`框架可实现多端兼容(需配置小程序路径): ```javascript // uniapp中引入mqtt import mqtt from 'mqtt/dist/mqtt.min'; ``` #### 四、调试建议 1. 使用MQTTX桌面客户端模拟设备端消息 2. 开启微信开发者工具的`调试`->`调试微信开发者工具`查看WebSocket通信细节
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值