Initial commit

src/ConnectedPage.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { Client } from 'paho-mqtt';
+
+
+const ConnectedPage = () => {
+  const StateMessages = [
+    "Clique no botão para conectar",
+    "Conectando...",
+    "Conectado",
+    "Erro na conexão",
+  ];
+
+  const [connected, setConnected] = useState(false);
+  const [client, setClient] = useState(null);
+  const [state, setState] = useState(0)
+
+  const handleClick = () => {
+    const options = {
+      clientId: 'aaaaa',
+      username: 'test',
+      password: '31415926',
+      clean: true,
+      reconnectPeriod: 1000,
+      connectTimeout: 30 * 1000,
+      host: 'fwmari.net',
+      port: 8883,
+    };
+
+    const _client = new Client(`ws://${options.host}:${options.port}/mqtt`, options.clientId);
+
+    _client.connect({
+      onSuccess: () => {
+        console.log("Conectado");
+        setConnected(true);
+        setState(2);
+      },
+      onFailure: (err) => {
+        console.log(`Erro ao conectar ${err}`);
+        setState(3);
+      },
+    });
+
+    setClient(_client);
+    setState(1);
+  }
+
+  return (
+    <div>
+      <button onClick={handleClick}>
+        Conectar ao servidor MQTT
+      </button>
+
+      <p>Status: {StateMessages[state]}</p>
+
+      {connected && (
+        <div>
+          {/* O resto da sua página vai aqui */}
+          <p>Conectado ao servidor MQTT! Agora você pode ver o resto da página.</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ConnectedPage;