Vue中使用MQTT连接阿里云物联网平台并接收数据

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: true,
        keepAlive: 60,//心跳值，心跳值太大可能会连接不成功
      };

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

      const connect = () => {
        client.on('connect', (e) => {
          message.value = `连接成功${e}`;
          this.id = this.id +1;
          console.log('连接成功', e);
        });
      };

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

    }

这段代码展示了如何在Vue组件中使用MQTT连接到阿里云物联网平台并接收数据。

代码解析:

引入MQTT库: 确保已安装MQTT库，例如mqtt.js。
配置连接选项: 设置MQTT连接选项，包括服务器地址、端口、客户端ID、用户名、密码等。
创建MQTT客户端: 使用mqtt.connect()方法创建MQTT客户端实例。
监听连接事件: 使用client.on('connect', ...)监听连接成功的事件，并在回调函数中处理连接成功后的逻辑。
监听消息事件: 使用client.on('message', ...)监听接收消息的事件，并在回调函数中处理接收到的消息。
解析消息数据: 将接收到的消息转换为JSON格式，并提取需要的数据。
更新组件数据: 将解析后的数据更新到组件的数据属性中，以便在页面上展示。
绘制图表: 使用图表库（例如ECharts）根据接收到的数据绘制图表。

注意事项:

将代码中的占位符替换为实际的阿里云物联网平台连接信息和主题。
确保已在阿里云物联网平台上创建了对应的设备和主题，并配置了相应的权限。
根据实际需求调整代码中的数据解析和图表展示逻辑。

这段代码提供了一个基本的框架，你可以根据自己的需求进行修改和扩展。例如，你可以添加错误处理、数据存储、用户交互等功能，以构建更完整的物联网应用。