66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
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;
|