🔥Multitier Realtime Chart Sensor Suhu via MQTT, MySQL, dan WebSocket

Hasan AminHasan Amin
8 min read

Panduan ini akan membimbing kita membuat sistem realtime monitoring suhu berbasis MQTT. Data dari sensor dikirim per detik via aplikasi smartphone (MyMQTT), kemudian:

  • Disubscribe oleh backend ExpressJS pada Server 1

  • Disimpan di MySQL pada Server 2

  • Dikirim ke frontend (HTML + Bootstrap + Chart.js) secara realtime menggunakan WebSocket (Socket.IO) pada Server 3

🌐 Arsitektur Tiga Server

Arsitektur topologi aplikasi ini menggunakan multitier untuk mempelajari bagaimana aplikasi yang berbeda bisa saling berkomunikasi dan berintegrasi. Maka dari itu setiap bagian dari aplikasi di deploy pada server yang berbeda.

  1. Server 1: Backend (Express + MQTT + Socket.IO)

  2. Server 2: Database (MySQL)

  3. Server 3: Frontend (HTML + Chart.js + Socket.IO client)

📦 Persiapan Instalasi

Server 1: Install Node.js & Backend

Server ini berfungsi sebagai otak dari sistem, yang menerima data dari sensor (melalui MQTT), menyimpannya ke database (MySQL di Server 2), dan kemudian mendistribusikan data tersebut secara realtime ke frontend (di Server 3) menggunakan WebSocket.

Untuk membuat backend ini bekerja, kita membutuhkan Node.js, yaitu sebuah runtime JavaScript yang memungkinkan kita menjalankan kode JavaScript di luar browser. Dengan Node.js, kita bisa membangun aplikasi server seperti API, sistem real-time, dan sebagainya.

Langkah-langkah instalasi:

sudo apt update && sudo apt install -y nodejs npm
node -v && npm -v

Penjelasan:

  • nodejs adalah environment yang akan menjalankan aplikasi backend kita.

  • npm (Node Package Manager) digunakan untuk mengelola pustaka (library) yang akan kita butuhkan seperti express, mqtt, mysql2, dan socket.io.

Setelah Node.js terinstall, kita akan menggunakan library ini untuk develop:

  • REST API (menggunakan Express)

  • MQTT Client (untuk subscribe data dari sensor)

  • Koneksi ke database MySQL

  • Komunikasi real-time ke frontend menggunakan Socket.IO

Dengan kata lain, Server 1 ini adalah penghubung utama antara:

  • Sensor suhu (yang mengirimkan data)

  • Penyimpanan (MySQL)

  • Tampilan data (Chart di web browser)

Server 2: Install MySQL

Server ini berperan sebagai penyimpanan data (database server). Setiap data suhu yang dikirim dari sensor melalui aplikasi MQTT akan diteruskan oleh backend (Server 1) dan disimpan secara terstruktur di MySQL.

Mengapa perlu server terpisah untuk database?

  • Keamanan dan skalabilitas: Memisahkan database dari backend membuat sistem lebih aman dan mudah diskalakan.

  • Efisiensi: Beban kerja server dibagi antara penyimpanan dan pengolahan data.

  • Konsistensi dan keandalan: MySQL adalah sistem manajemen basis data yang handal untuk menyimpan data dengan relasi.

sudo apt install mysql-server
sudo mysql_secure_installation

Penjelasan:

  • mysql-server adalah perangkat lunak basis data yang akan kita gunakan.

  • mysql_secure_installation membantu mengatur keamanan dasar (seperti password root dan penghapusan user anonim).

Server 3: Web Server (optional)

Server ini berfungsi sebagai antarmuka pengguna (frontend) — tempat pengguna bisa melihat grafik suhu secara realtime melalui browser. Kita akan menggunakan Apache sebagai web server yang akan menyajikan file HTML, Bootstrap, dan Chart.js ke browser pengguna.

Mengapa dipisah ke server tersendiri?

  • Pemisahan tanggung jawab: Frontend fokus pada tampilan, backend fokus pada logika dan data.

  • Pengamanan & skalabilitas: Kita bisa memperkuat keamanan tiap layer sesuai kebutuhannya.

  • Efisiensi distribusi konten: Web server seperti Apache sangat efisien dalam melayani file statis (HTML, JS, CSS) ke banyak pengguna sekaligus.

sudo apt install apache2

Jika instalasi berhasil, maka untuk konfigurasi web server ada di directory /var/www/html

Setelah itu, pastikan Apache aktif:

sudo systemctl restart apache2
sudo systemctl enable apache2

Lalu akses frontend dari browser melalui:

http://<IP_SERVER3>

Frontend ini akan otomatis membuka koneksi WebSocket ke backend (Server 1), dan menampilkan data suhu ke chart secara realtime. Mahasiswa akan melihat bagaimana satu sistem IoT bisa terdiri dari beberapa komponen dan berkomunikasi melalui jaringan antar server.

🗄️ Konfigurasi Database (Server 2)

Login ke MySQL:

sudo mysql -u root -p

Buat database dan user:

CREATE DATABASE mqttdb;
CREATE USER 'mqttuser'@'%' IDENTIFIED BY 'Pass1324!@';
GRANT ALL PRIVILEGES ON mqttdb.* TO 'mqttuser'@'%';
FLUSH PRIVILEGES;
USE mqttdb;
CREATE TABLE temperatures (
  id INT AUTO_INCREMENT PRIMARY KEY,
  value FLOAT NOT NULL,
  timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
);

🧠 Backend (Server 1)

1. Struktur Folder

Struktur folder untuk backend proyek ini sangat sederhana dan cukup satu level saja. Berikut struktur direktori utamanya:

mqtt-backend/
│── server.js
│── package.json

Penjelasan:

  • mqtt-backend/: Ini adalah folder root untuk aplikasi backend Node.js Anda. Semua file terkait backend diletakkan di sini.

  • server.js: File ini adalah titik masuk (entry point) dari aplikasi backend. Di dalamnya terdapat:

    • Koneksi ke broker MQTT (berlangganan data suhu)

    • Koneksi ke database MySQL (untuk menyimpan data suhu)

    • Setup WebSocket (mengirim data ke frontend secara realtime)

    • Setup Express.js (API dan routing jika diperlukan)

  • package.json: File ini otomatis dibuat ketika Anda menjalankan npm init. File ini berfungsi untuk:

    • Mendefinisikan nama aplikasi, versi, deskripsi, dan entry point.

    • Menyimpan daftar dependency (seperti express, mqtt, mysql2, dan socket.io)

    • Menyediakan script seperti npm start untuk menjalankan server

💡 Tips untuk Mahasiswa:
Struktur folder yang rapi sangat penting dalam pengembangan perangkat lunak agar kode mudah dipelihara dan dikembangkan. Meskipun saat ini proyeknya kecil, struktur ini akan membantu saat proyek berkembang lebih besar.

2. Install Modul

Setelah membuat folder backend, kita akan menginisialisasi proyek Node.js dan menginstal berbagai modul yang dibutuhkan.

mkdir mqtt-backend
cd mqtt-backend
npm init -y
npm install express mysql2 mqtt socket.io cors

Penjelasan langkah demi langkah:

  • mkdir mqtt-backend
    Membuat folder baru bernama mqtt-backend, tempat semua file backend akan disimpan.

  • cd mqtt-backend
    Masuk ke folder tersebut untuk mulai bekerja di dalamnya.

  • npm init -y
    Membuat file package.json secara otomatis. File ini berisi informasi tentang proyek dan dependency yang digunakan.

  • npm install express mysql2 mqtt socket.io cors
    Menginstal semua modul yang dibutuhkan:

    1. express : Framework web minimalis untuk membangun server HTTP

    2. mysql2 : Driver untuk menghubungkan Node.js ke database MySQL

    3. mqtt : Library untuk berlangganan ke broker MQTT dan menerima data sensor

    4. socket.io : Library untuk komunikasi realtime antara backend dan frontend via WebSocket

    5. cors : Middleware untuk mengizinkan akses lintas domain (diperlukan oleh frontend)

💡 Tips untuk Mahasiswa:
Dalam pengembangan backend modern, menggunakan modul-modul seperti ini memudahkan kita membangun server yang tangguh, fleksibel, dan mendukung komunikasi realtime.

3. Kode server.js

Berikut adalah kode lengkap backend Node.js yang:

  • Terhubung ke broker MQTT (misalnya via aplikasi MyMQTT)

  • Menyimpan data suhu ke database MySQL

  • Mengirim data secara realtime ke frontend melalui WebSocket

// Import modul yang dibutuhkan
const express = require('express');           // Framework untuk server HTTP
const mqtt = require('mqtt');                 // Untuk koneksi MQTT
const mysql = require('mysql2');              // Driver MySQL
const cors = require('cors');                 // Untuk mengizinkan akses dari frontend
const http = require('http');                 // Untuk membuat HTTP server manual
const { Server } = require('socket.io');      // Untuk WebSocket

const app = express();
app.use(cors());                              // Aktifkan CORS agar frontend bisa akses

const server = http.createServer(app);        // Buat HTTP server
const io = new Server(server, { cors: { origin: "*" } });  // Inisialisasi WebSocket

// Konfigurasi koneksi ke MySQL (ganti IP_SERVER2 sesuai lokasi server database)
const db = mysql.createConnection({
  host: 'IP_SERVER2',
  user: 'mqttuser',
  password: 'password123',
  database: 'mqttdb'
});

// Cek koneksi MySQL
db.connect(err => {
  if (err) return console.error('MySQL error:', err);
  console.log('Connected to MySQL');
});

// Koneksi ke broker MQTT publik (bisa juga pakai lokal jika punya)
const mqttClient = mqtt.connect('mqtt://broker.hivemq.com');

// Saat konek ke MQTT, subscribe ke topik `sensor/suhu`
mqttClient.on('connect', () => {
  console.log('MQTT Connected');
  mqttClient.subscribe('sensor/suhu');
});

// Saat menerima pesan dari topik MQTT
mqttClient.on('message', (topic, message) => {
  const suhu = parseFloat(message.toString());   // Ambil nilai suhu
  if (!isNaN(suhu)) {
    // Simpan ke database
    db.query('INSERT INTO temperatures (value) VALUES (?)', [suhu], err => {
      if (err) return console.error(err);
      const timestamp = new Date().toISOString();
      // Kirim ke frontend melalui WebSocket
      io.emit('new-data', { value: suhu, timestamp });
    });
  }
});

// Endpoint untuk ambil data terbaru (20 data terakhir)
app.get('/api/data', (req, res) => {
  db.query('SELECT * FROM temperatures ORDER BY timestamp DESC LIMIT 20', (err, results) => {
    if (err) return res.status(500).send('DB error');
    res.json(results.reverse());  // Dibalik agar urutan waktu dari lama ke baru
  });
});

// Log ketika ada koneksi WebSocket dari frontend
io.on('connection', (socket) => {
  console.log('Client connected:', socket.id);
});

// Jalankan server di port 3000
server.listen(3000, () => {
  console.log('Backend running on http://<IP_SERVER1>:3000');
});

Cara Menjalankan Backend:

node server.js

Jika berhasil, Anda akan melihat log:

Backend running on http://<IP_SERVER1>:3000
MQTT Connected
Connected to MySQL

🎓 Catatan untuk Mahasiswa:

  • Backend ini adalah jembatan antara sensor (via MQTT), database (MySQL), dan frontend (melalui WebSocket).

  • Pendekatan ini sangat ideal untuk aplikasi IoT realtime karena efisien dan scalable.

🎨 Frontend (Server 3)

1. HTML File (index.html)

File ini adalah tampilan sederhana berbasis HTML untuk menampilkan data suhu secara realtime menggunakan Chart.js dan Socket.IO.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sensor Suhu Realtime</title>
  <!-- Chart.js untuk menampilkan grafik -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Socket.IO client untuk komunikasi realtime -->
  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <!-- Bootstrap CSS untuk tampilan lebih rapi -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-5">
  <h2>Sensor Suhu Realtime</h2>
  <canvas id="suhuChart" width="600" height="300"></canvas>

  <script>
    // Inisialisasi koneksi ke backend menggunakan WebSocket
    const socket = io('http://<IP_SERVER1>:3000');

    // Ambil elemen canvas untuk grafik
    const ctx = document.getElementById('suhuChart').getContext('2d');

    // Buat grafik awal (kosong)
    const chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [],  // Label waktu
        datasets: [{
          label: 'Suhu (°C)',
          data: [],
          borderColor: 'red',
          tension: 0.3,
        }]
      }
    });

    // Ketika ada data baru dari server
    socket.on('new-data', (data) => {
      const time = new Date(data.timestamp).toLocaleTimeString(); // Format waktu
      chart.data.labels.push(time);         // Tambah waktu ke label
      chart.data.datasets[0].data.push(data.value); // Tambah suhu ke grafik

      // Maksimal 20 data terakhir saja yang ditampilkan
      if (chart.data.labels.length > 20) {
        chart.data.labels.shift();          // Hapus label tertua
        chart.data.datasets[0].data.shift(); // Hapus data tertua
      }

      chart.update(); // Update grafik di browser
    });
  </script>
</body>
</html>

Simpan di folder yang bisa diakses web server (/var/www/html atau nginx/html).

🔍 Penjelasan Utama:

  • Chart.js: Library visualisasi data, dipakai untuk menggambar grafik suhu.

  • Socket.IO: Digunakan untuk menerima data secara realtime dari server.

  • Bootstrap: Library CSS agar tampilan frontend rapi tanpa perlu menulis CSS manual.

  • <IP_SERVER1>: Ganti dengan IP dari Server 1 tempat backend berjalan.

🎓 Catatan untuk Mahasiswa:
File ini bisa disimpan di server Apache (misalnya di /var/www/html) agar bisa diakses lewat browser dari berbagai perangkat dalam jaringan yang sama.

📱 Pengiriman Data

Gunakan aplikasi MyMQTT di HP:

  • Broker: broker.hivemq.com

  • Publish ke topic: sensor/suhu

  • Data: angka suhu, misal 34, 35, 36 per detik

🚀 Penutup

✅ Kita sekarang memiliki sistem sensor suhu realtime dengan MQTT, MySQL, dan WebSocket yang ringan dan efisien.
Silakan dikembangkan untuk fitur lain seperti alert, dashboard login, grafik mingguan, dll.

Ditulis oleh: Hasan Amin
Follow saya di Hashnode dan GitHub untuk project open source lainnya.

0
Subscribe to my newsletter

Read articles from Hasan Amin directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Multi Tier Web Application Node.jsJavaScriptmqtt

Written by

Hasan Amin
Hasan Amin