使用 MQTT 获取实时降雨量数据并可视化

function getRain() {
  const message = ref('连接mqtt');
  let options = {
    connectTimeout: 3000, //超时时间
    clientId: 'iduqX07y1BB.rainVue|securemode=2,signmethod=hmacsha256,timestamp=1697440312528|', //客户端ID
    username: 'rainVue&iduqX07y1BB', //用户名
    password: '9e94094ff1b2bd25a1e5e0950a9faa888d8d99c8655f9f58db36990ac1251655', //密码
    cleanSession: false,
    keepAlive: 60,//心跳时间
  };

  let client = mqtt.connect(
    'wss://iot-06z00bpyd3hc8qg.mqtt.iothub.aliyuncs.com:443',//连接域名
    options
  );

  const connect = () => {
    client.on('connect', (e) => {
      message.value = `连接成功${e}`;
      console.log('连接成功', e);
      client.subscribe(
        '/sys/iduqX07y1BB/rainMonitor/thing/event/property/post',//订阅主题
        { qos: 0 },
        (error) => {
          console.log(error);
        }
      );
    });
  };

  const duankai = () => {
    client.end();
    console.log('断开');
  };

  client.on('error', (error) => {
    console.log('连接出错', error);
  });

  client.on('message', (topic, message) => {
    this.mqttvalue = message.toString();
    console.log(`接收${topic}消息:${message.toString()}`);
    let jsonData = JSON.parse(message.toString());  // 将 JSON 字符串解析成 JavaScript 对象
    this.rainfall_01 = jsonData.params.Rainfall_01;
    this.rainfall_02 = jsonData.params.Rainfall_02;
    this.rainList_01.push(this.rainfall_01);
    this.rainList_02.push(this.rainfall_02);
    this.timeData.push(new Date().toLocaleTimeString()); // 获取当前时间
    this.drawDash();
    this.drawLine();
  });
}

代码解读:

这段代码实现了通过 MQTT 协议从阿里云物联网平台获取实时降雨量数据，并进行可视化的功能。

连接 MQTT 服务器:
- 首先定义连接选项，包括 MQTT 服务器地址、客户端 ID、用户名、密码等。
- 使用 mqtt.connect() 方法创建 MQTT 客户端并连接服务器。
订阅主题:
- 连接成功后，使用 client.subscribe() 方法订阅指定主题，以便接收该主题下的消息。
处理接收到的消息:
- 使用 client.on('message', ...) 监听 message 事件，当收到消息时触发回调函数。
- 在回调函数中，将接收到的 JSON 格式的消息解析成 JavaScript 对象。
- 从解析后的对象中提取降雨量数据和其他相关信息。
- 将数据存储到数组中，用于后续图表绘制。
- 调用 drawDash() 和 drawLine() 函数进行数据可视化。

总结:

这段代码展示了如何使用 MQTT 协议获取实时数据，并结合数据可视化技术，实现对数据的实时监控和分析。这对于需要实时监测环境参数的应用场景非常有用，例如气象监测、农业灌溉等。