example dashboard svg mqtt

src/components/Global/MqttConnection.jsx

@@ -1,19 +1,18 @@
 // mqttService.js
 import mqtt from 'mqtt';
 
-const mqttUrl = 'ws://36.66.16.49:9001';
-const topics = ['SYPIU_GGCP', 'SYPIU_GGCP/list-permit/changed','SYPIU_GGCP/list-user/changed'];
-
+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: 'ide', // jika ada
-  password: 'aremania', // jika ada
+    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);
@@ -22,37 +21,37 @@ const client = mqtt.connect(mqttUrl, options);
 let isConnected = false;
 
 client.on('connect', () => {
-  console.log('MQTT Connected');
-  isConnected = true;
+    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(', ')}`);
-  });
+    // 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();
+    console.error('Connection error: ', err);
+    client.end();
 });
 
 client.on('close', () => {
-  console.log('MQTT Disconnected');
-  isConnected = false;
+    console.log('MQTT Disconnected');
+    isConnected = false;
 });
 
 /**
  * Publish message to MQTT
- * @param {string} topic 
- * @param {string} message 
+ * @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');
-  }
+    if (client && isConnected && message.trim() !== '') {
+        client.publish(topic, message);
+    } else {
+        console.warn('MQTT not connected or message empty');
+    }
 };
 
 /**
@@ -60,13 +59,41 @@ const publishMessage = (topic, message) => {
  * @param {function} callback - Function(topic, message)
  */
 const listenMessage = (callback) => {
-  client.on('message', (topic, message) => {
-    callback(topic, message.toString());
-  });
+    client.on('message', (topic, message) => {
+        callback(topic, message.toString());
+    });
 };
 
-export {
-  publishMessage,
-  listenMessage,
-  client,
+const listenMessageState = (setState) => {
+    client.on('message', (topic, message) => {
+        const msgObj = {
+            date: new Date().toLocaleString(),
+            topic: topic,
+            msg: JSON.parse(message),
+        };
+        setState(msgObj);
+    });
 };
+
+const setValSvg = (msgValue, topic, svg) => {
+    if (msgValue.topic == topic) {
+        const objChanel = msgValue?.msg;
+        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, listenMessageState, setValSvg };