mqtt接入事件回调测试

参考

node接入 main.js

js 复制代码

import mqtt from 'mqtt';

// broker 地址（WebSocket over TLS）
const brokerUrl = 'wss://broker.emqx.io:8084/mqtt';

// 连接选项
const options = {
  username: '',
  password: '', // 如果没有密码，可以去掉
  clientId: 'mqtt_test_nodejs_' + Math.random().toString(16).substr(2, 8),
  clean: true,
  reconnectPeriod: 1000, // 自动重连间隔 1 秒
};

// 订阅和发布的主题
const topic = 'ming/#';

// 连接 broker
const client = mqtt.connect(brokerUrl, options);

client.on('connect', () => {
  console.log('已连接到 MQTT broker');

  // 订阅主题
  client.subscribe(topic, (err) => {
    if (err) {
      console.error('订阅失败:', err);
    } else {
      console.log(`已订阅主题: ${topic}`);

      // 发送测试消息
      const message = 'Hello MQTT via WS ESM!';
      client.publish("ming/4", message, () => {
        console.log(`📤 已发送消息: ${message}`);
      });
    }
  });
});

// 接收消息
client.on('message', (topic, message) => {
  console.log(`收到消息 [${topic}]: ${message.toString()}`);
});

// 错误处理
client.on('error', (err) => {
  console.error('MQTT 连接错误:', err);
});

网页接入 index.html

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>MQTT WebSocket 测试</title>
</head>
<body>
  <h1>MQTT WebSocket 测试</h1>
  <div id="log"></div>

  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
  <script>
    const logEl = document.getElementById('log');
    function log(msg) {
      console.log(msg);
      logEl.innerHTML += msg + '<br>';
    }

    // broker 地址（WebSocket over TLS）
    const brokerUrl = 'wss://broker.emqx.io:8084/mqtt';

    // 连接选项
    const options = {
      username: '', // 如果需要用户名填这里
      password: '', // 如果需要密码填这里
      clientId: 'mqtt_test_browser_' + Math.random().toString(16).substr(2, 8),
      clean: true,
      reconnectPeriod: 1000 // 自动重连间隔 1 秒
    };

    // 订阅和发布的主题
    const topic = 'ming/#';

    // 连接 broker
    const client = mqtt.connect(brokerUrl, options);

    client.on('connect', () => {
      log('✅ 已连接到 MQTT broker');

      // 订阅主题
      client.subscribe(topic, (err) => {
        if (err) {
          log('❌ 订阅失败: ' + err);
        } else {
          log(`✅ 已订阅主题: ${topic}`);

          // 发送测试消息
          const message = 'Hello MQTT via Browser!';
          client.publish('ming/4', message, () => {
            log(`📤 已发送消息: ${message}`);
          });
        }
      });
    });

    client.on('message', (topic, message) => {
      log(`📥 收到消息 [${topic}]: ${message.toString()}`);
    });

    client.on('error', (err) => {
      log('❌ MQTT 连接错误: ' + err);
    });
  </script>
</body>
</html>