92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
// mqttService.js
|
|
import mqtt from 'mqtt';
|
|
|
|
const mqttUrl = `${import.meta.env.VITE_MQTT_SERVER ?? 'ws://localhost:1884'}`;
|
|
const topics = ['PIU_GGCP/Devices/PB'];
|
|
const options = {
|
|
keepalive: 30,
|
|
clientId: 'react_mqtt_' + Math.random().toString(16).substr(2, 8),
|
|
protocolId: 'MQTT',
|
|
protocolVersion: 4,
|
|
clean: true,
|
|
reconnectPeriod: 1000,
|
|
connectTimeout: 30 * 1000,
|
|
username: `${import.meta.env.VITE_MQTT_USERNAME ?? ''}`, // jika ada
|
|
password: `${import.meta.env.VITE_MQTT_PASSWORD ?? ''}`, // jika ada
|
|
};
|
|
|
|
const client = mqtt.connect(mqttUrl, options);
|
|
|
|
// Track connection status
|
|
let isConnected = false;
|
|
|
|
client.on('connect', () => {
|
|
console.log('MQTT Connected');
|
|
isConnected = true;
|
|
|
|
// Subscribe default topic
|
|
client.subscribe(topics, (err) => {
|
|
if (err) console.error('Subscribe error:', err);
|
|
else console.log(`Subscribed to topics: ${topics.join(', ')}`);
|
|
});
|
|
});
|
|
|
|
client.on('error', (err) => {
|
|
console.error('Connection error: ', err);
|
|
client.end();
|
|
});
|
|
|
|
client.on('close', () => {
|
|
console.log('MQTT Disconnected');
|
|
isConnected = false;
|
|
});
|
|
|
|
/**
|
|
* Publish message to MQTT
|
|
* @param {string} topic
|
|
* @param {string} message
|
|
*/
|
|
const publishMessage = (topic, message) => {
|
|
if (client && isConnected && message.trim() !== '') {
|
|
client.publish(topic, message);
|
|
} else {
|
|
console.warn('MQTT not connected or message empty');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Listen to incoming messages
|
|
* @param {function} callback - Function(topic, message)
|
|
*/
|
|
const listenMessage = (callback) => {
|
|
client.on('message', (topic, message) => {
|
|
callback(topic, message.toString());
|
|
});
|
|
};
|
|
|
|
const setValSvg = (listenTopic, svg) => {
|
|
client.on('message', (topic, message) => {
|
|
if (topic == listenTopic) {
|
|
const objChanel = JSON.parse(message);
|
|
|
|
Object.entries(objChanel).forEach(([key, value]) => {
|
|
// console.log(key, value);
|
|
const el = svg.getElementById(key);
|
|
if (el) {
|
|
if (value === true) {
|
|
el.style.display = ''; // sembunyikan
|
|
} else if (value === false) {
|
|
el.style.display = 'none';
|
|
} else if (!isNaN(value)) {
|
|
el.textContent = Number(value ?? 0.0);
|
|
} else {
|
|
el.textContent = value;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
export { publishMessage, listenMessage, setValSvg };
|