MQTT与前端Antd Charts 交互

• 参数必须与EMQX Cloud中一致（用户名，密码，连接地址）

yarn add mqtt 安装MQTT

    useEffect(() => {
        const url = 'wss://q70999f9.ala.cn-hangzhou.emqxsl.cn:8084/mqtt';
        const options = {
          clean: true,
          clientId: 'emqx_react_3d0c42',
          connectTimeout: 30000,
          password: 'myb135246',
          reconnectPeriod: 1000,
          username: 'MayuboTest',
        };
        connect(url, options);
      }, []);  
      
      
    const mqttConnect = (host, mqttOption) => {
    setClient(mqtt.connect(host, mqttOption));
      };
      useEffect(() => {
        if (client) {
          client.on('connect', () => {
            message.success('连接成功');
          });
          client.on('error', (err) => {
            console.error('连接失败: ', err);
            client.end(); // 关闭客户端实例
          });
          client.on('message', (topic, message) => {
            const payload = { topic, message: message.toString() };
            setPayload(payload);
          });
        }
      }, [client]);

  const mqttDisconnect = () => {
    if (client) {
      try {
        client.end(false, () => {
          message.success('断开连接');
        });
      } catch (error) {
        console.log('disconnect error:', error);
      }
    }
  };

  const mqttSub = (subscription) => {
    if (client) {
      const { topic, qos } = subscription;
      client.subscribe(topic, { qos }, (error) => {
        if (error) {
          message.error('订阅主题错误 请确认topic是否正确');
          return;
        }
        setIsSub(true); // 更新订阅状态
      });
    }
  };

此时在MQTTX中发送消息就可以接收到了，并且是实时更新，也可以在页面中向MQTTX发送消息