Rancang Bangun Dashboard Web Real-Time Berbasis WebSocket dan MQTT untuk Pemantauan Kualitas Air dengan Fitur Predictive Maintenance
-
Fabiola Zefanya Anes
*
Politeknik Negeri Manado, Manado,
Indonesia
- Keryn Herlita Pattimahu Politeknik Negeri Manado, Manado, Indonesia
- Venny V Ponggawa Politeknik Negeri Manado, Manado, Indonesia
- Edwin Lumunon Politeknik Negeri Manado, Manado, Indonesia (*) Corresponding Author
Abstract
Conventional water quality monitoring systems face two main obstacles: high data transmission latency caused by HTTP polling mechanisms and the inability to proactively notify operators of sensor conditions before failure occurs. This study presents the design and implementation of an integrated real-time web dashboard that combines Internet of Things (IoT) architecture with a WebSocket-based interface for water quality monitoring and predictive maintenance notifications. An ESP32 microcontroller acquires pH, turbidity, temperature, and TDS parameters and publishes them asynchronously via MQTT protocol to the HiveMQ public broker. A FastAPI backend subscribes to the broker, processes time-series data streams, and broadcasts telemetry and inference status to a React 18 frontend through persistent WebSocket channels. As a supporting inference component, a 1D-CNN model is adopted as a standard classification engine to distinguish Normal, Degraded, and Critical sensor conditions—complementing a TDS-based Rejection Rate formula used as an aggregate filtration performance indicator. System testing shows an average end-to-end latency of 1.38 seconds from sensor acquisition to dashboard rendering, with 1–2 second data reception intervals confirming WebSocket channel reliability. Conditional rendering on the React interface successfully visualizes three dynamic operational status levels based on Rejection Rate values: Fit for Consumption (green, RR 94.8%), Warning (orange, RR 91.6%), and Not Fit for Consumption (red, RR −79.8%). The resulting platform demonstrates that integrating low-latency message brokering with a high-performance asynchronous server can deliver responsive visualization and proactive maintenance notifications without dedicated GPU hardware. The primary contribution of this study is the development of an integrated monitoring dashboard architecture that combines low-latency messaging protocols with a lightweight inference model, thereby enabling real-time preventive maintenance notifications to be executed instantly on an interactive web interface.
Downloads
References
Andriani, I., & Hidayat, W. (2026). Rancang Bangun Sistem Monitoring Kualitas Air Real- Time Berbasis IoT untuk Mitigasi Pencemaran Lingkungan Perkotaan. 6, 137–152. https://doi.org/https://doi.org/10.69503/ije.v6i2.1629
Anggrawan, A., Hadi, S., & Satria, C. (2022). IoT-Based Garbage Container System Using NodeMCU ESP32 Microcontroller. Journal of Advances in Information Technology, 13(6), 569–577. https://doi.org/10.12720/jait.13.6.569-577
Ankalaki, S., & Thippeswamy, M. N. (2024). Optimized Convolutional Neural Network Using Hierarchical Particle Swarm Optimization for Sensor Based Human Activity Recognition. SN Computer Science, 5(5). https://doi.org/10.1007/s42979-024-02794-5
Ash Shiddiqi, A., Wasitova, L. S., & Hari Nugroho, D. (2026). IoT-Based Real-Time Vibration and Temperature Monitoring System for Industrial Machinery Using ESP32 and MQTT. International Journal of Engineering Continuity, 5(1), 53–71. https://doi.org/10.58291/ijec.v5i1.519
Baek, S. S., Pyo, J., & Chun, J. A. (2020). Prediction of water level and water quality using a cnn-lstm combined deep learning approach. Water (Switzerland), 12(12). https://doi.org/10.3390/w12123399
Camargo, E. T. (2023). Low-Cost Water Quality Sensors for IoT: A Systematic Review. Sensors, 23(9), 4424. https://doi.org/https://doi.org/10.3390/s23094424
Ebron, J. G. (2025). An IoT-Integrated Multi-Sensor and Deep Learning System for Real-Time Water Quality Forecasting: a Case Study at Cabuyao City. Chemical Engineering Transactions , 122(June), 439–444. https://doi.org/10.3303/CET25122074
Helena Manurung, C. T., Arifin, J., Syifa, F. T., & Rochmanto, R. A. (2022). Pemanfaatan ESP32 Sebagai Sistem Pemantauan Kualitas Air Keran Siap Minum Secara Real-Time Menggunakan Aplikasi. Journal of Telecommunication, Electronics, and Control Engineering (JTECE), 4(2), 93–98. https://doi.org/10.20895/jtece.v4i2.535
Kanimozhi, M., & Malathy, P. (2025). Air quality prediction using a u-net inspired 1d-cnn with attention mechanisms. Global Nest Journal, 27(3), 1–8. https://doi.org/10.30955/gnj.06726
Morselli, F., Bedogni, L., Mirani, U., Fantoni, M., & Galasso, S. (2021). Anomaly Detection and Classification in Predictive Maintenance Tasks with Zero Initial Training. Internet of Things, 2(4), 590–609. https://doi.org/10.3390/iot2040030
Murley, P., Ma, Z., Mason, J., Bailey, M., & Kharraz, A. (2021). Websocket adoption and the landscape of the real-time web. The Web Conference 2021 - Proceedings of the World Wide Web Conference, WWW 2021, 1192–1203. https://doi.org/10.1145/3442381.3450063
Nafis, N. K., Waruwu, J. N., Harmelia, A. P., Aisah, A. S., & Maulana, D. (2026). TIN : Terapan Informatika Nusantara Rancang Bangun Alat Ukur Kualitas Air Sanitasi Berbasis ESP32-C6 dan Internet of Things TIN : Terapan Informatika Nusantara. 7(1), 587–595. https://doi.org/10.47065/tin.v7i1.10261
Nsor, M. (2025). Predictive Maintenance Using Machine Learning for Engineering Systems Through Real-Time Sensor Data and Anomaly Detection Models. International Journal of Research Publication and Reviews, 6(7), 5167–5183. https://doi.org/10.55248/gengpi.6.0725.2541
Omol, E., Mburu, L., & Onyango, D. (2024). Anomaly Detection In IoT Sensor Data Using Machine Learning Techniques For Predictive Maintenance In Smart Grids. International Journal of Science, Technology & Management, 5(1), 201–210. https://doi.org/10.46729/ijstm.v5i1.1028
Rao, V., Eskandari, A., Zulkernine, F., Helwa, M. K., & Beach, D. (2025a). CNN-CCA: A deep learning approach for anomaly detection in metro rail sensor time-series data. Machine Learning with Applications, 21(June), 100728. https://doi.org/10.1016/j.mlwa.2025.100728
Rao, V., Eskandari, A., Zulkernine, F., Helwa, M. K., & Beach, D. (2025b). CNN-CCA: A deep learning approach for anomaly detection in metro rail sensor time-series data. Machine Learning with Applications, 21(June), 100728. https://doi.org/10.1016/j.mlwa.2025.100728
Sarvaiya, Ms. S. B. (2022). Analysis of IoT Data Transfer Messaging Protocols on Application Layer. International Journal for Research in Applied Science and Engineering Technology, 10(7), 1812–1819. https://doi.org/10.22214/ijraset.2022.45604
Shu, J., & Yang, D. (2026). CNN-LSTM-POT-Based Anomaly Detection for Smart Greenhouse Sensor Data: A Real-Time Edge Deployment Approach. Future Internet, 18(4). https://doi.org/10.3390/fi18040205
Shvaika, D., Shvaika, A., & Artemchuk, V. (2025). MQTT Broker Architectural Enhancements for High-Performance P2P Messaging: TBMQ Scalability and Reliability in Distributed IoT Systems. Internet of Things, 6(3), 1–24. https://doi.org/10.3390/iot6030034
Singh, B., & Verma, P. (2024). An Analysis For Advanced Anomaly Detection Techniques Tailored For HTTP- Based Iot Systems. Nanotechnology Perceptions, 12(2024), 1624–1637. https://doi.org/10.62441/nano-ntp.vi.5529
Suryani, A., & Kusumayati, A. (2022). Faktor Yang Berhubungan Dengan Kualitas Biologis Air Minum Isi Ulang: Literature Review. PREPOTIF : Jurnal Kesehatan Masyarakat, 6(2), 1852–1860. https://doi.org/10.31004/prepotif.v6i2.5612
Yamin, M. I., Ariman, A., Marta Dinata, R., & Purnomo, N. (2026). Comparative Performance Evaluation of MQTT, WebSocket, and Firebase on ESP32-C3 for Real-Time IoT Communication. JATI (Jurnal Mahasiswa Teknik Informatika), 10(3), 3917–3923. https://doi.org/10.36040/jati.v10i3.18056
Zhai, J., Li, B., Lv, S., & Zhou, Q. (2023). FPGA-Based Vehicle Detection and Tracking Accelerator. Sensors, 23(4), 1–26. https://doi.org/10.3390/s23042208
Bila bermanfaat silahkan share artikel ini
Berikan Komentar Anda terhadap artikel Rancang Bangun Dashboard Web Real-Time Berbasis WebSocket dan MQTT untuk Pemantauan Kualitas Air dengan Fitur Predictive Maintenance
Copyright (c) 2026 Fabiola Zefanya Anes, Keryn Herlita Pattimahu, Venny V Ponggawa, Edwin Lumunon
This work is licensed under a Creative Commons Attribution 4.0 International License.
Authors who publish with this journal agree to the following terms:
- Authors retain copyright and grant the journal right of first publication with the work simultaneously licensed under Creative Commons Attribution 4.0 International License that allows others to share the work with an acknowledgment of the work's authorship and initial publication in this journal.
- Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal's published version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgment of its initial publication in this journal.
- Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (Refer to The Effect of Open Access).
