Simulasi Sistem Antrian Digital Layanan Akademik Menggunakan ESP32 dan MQTT melalui WebSocket pada WOKWI

LAPORAN PRAKTIKUM

Simulasi Sistem Antrian Digital Layanan Akademik Menggunakan ESP32 dan MQTT melalui WebSocket pada WOKWI

Disusun oleh :

Fandy Fernanda Yapari                                        24051204227

Tri Rianto Utomo                                                  24051204104

Rochmad Balya Imron Khan                               24051204179

Sulthan Hamdani Sahvirdan                               24051204129

Muhammad Ai-bee Tazkyan N                          24051204212

 

BAB 1
PENDAHULUAN

1.1  Latar Belakang

Pelayanan di lingkungan perguruan tinggi, seperti layanan administrasi akademik, sering kali melibatkan banyak pengunjung yang datang pada waktu bersamaan. Tanpa sistem antrian yang jelas, pengunjung harus menunggu tanpa kepastian giliran, sulit mengetahui nomor yang sedang dilayani, dan petugas kesulitan mengatur urutan pelayanan.

Perkembangan teknologi Internet of Things (IoT) memungkinkan perangkat elektronik saling terhubung dan bertukar data secara real-time. Salah satu protokol yang banyak digunakan pada IoT adalah MQTT (Message Queuing Telemetry Transport), yaitu protokol pengiriman pesan yang ringan dengan pola publish/subscribe. Agar data MQTT dapat diakses langsung melalui halaman web, MQTT dapat dijalankan di atas WebSocket menggunakan pustaka seperti Paho JavaScript, sehingga peramban cukup membuka sebuah halaman HTML tanpa memasang aplikasi tambahan.

Mikrokontroler ESP32 dipilih karena memiliki konektivitas Wi-Fi bawaan sehingga dapat berperan sebagai klien MQTT. Dalam proses perancangan dan pengujian, penggunaan Wokwi membantu melakukan simulasi rangkaian dan program secara virtual tanpa perangkat keras fisik.

Berdasarkan hal tersebut, pada praktikum ini dibuat simulasi sistem antrian digital layanan akademik menggunakan ESP32, LCD, tombol, dan buzzer pada Wokwi, yang terhubung melalui MQTT dengan halaman web sebagai dasbor antrian. Pengunjung mengambil nomor melalui tombol pada perangkat, sedangkan petugas dapat memanggil nomor berikutnya melalui tombol pada perangkat maupun melalui web, dan seluruh perubahan tampil secara real-time di kedua sisi.

1.2  Rumusan Masalah

1. Bagaimana merancang sistem antrian digital sederhana menggunakan ESP32?
2. Bagaimana ESP32 dapat mengirim dan menerima data melalui protokol MQTT?
3. Bagaimana halaman web dapat terhubung ke broker MQTT melalui WebSocket menggunakan pustaka Paho JavaScript?
4. Bagaimana mengintegrasikan tombol, LCD, dan buzzer sebagai antarmuka pada perangkat antrian?
5. Bagaimana melakukan simulasi dan pengujian komunikasi dua arah antara ESP32 di Wokwi dan halaman web?

1.3  Tujuan Laporan

Tujuan dari pembuatan laporan ini adalah:

1. Merancang sistem antrian digital berbasis ESP32 pada simulator Wokwi.
2. Memahami cara kerja MQTT dan penerapannya pada ESP32.
3. Memahami penggunaan MQTT melalui WebSocket dan Paho JavaScript pada halaman web.
4. Mengintegrasikan tombol, LCD, dan buzzer sebagai antarmuka sistem.
5. Menguji komunikasi dua arah antara perangkat dan halaman web secara real-time.

1.4  Manfaat

1.     Menambah pemahaman mengenai penerapan Internet of Things dalam kehidupan sehari-hari.

2.     Menambah pemahaman mengenai penggunaan ESP32 sebagai perangkat IoT.

3.     Mengetahui penggunaan sensor LDR untuk membaca kondisi cahaya.

4.     Melatih kemampuan membuat sistem otomatis berdasarkan data sensor.

5.     Memahami cara kerja komunikasi MQTT.

6.     Mengetahui penggunaan platform ThingsBoard untuk menerima dan memantau data sensor.

7.     Melatih kemampuan melakukan simulasi rangkaian dan pengujian sistem menggunakan Wokwi.

 

 

BAB 2
TINJAUAN PUSTAKA

2.1  Dasar Teori

2.1.1      ESP32

ESP32 adalah mikrokontroler yang banyak digunakan pada pengembangan sistem IoT karena dilengkapi konektivitas Wi-Fi dan Bluetooth. Pada praktikum ini, ESP32 berfungsi sebagai pusat kendali yang membaca tombol, mengendalikan LCD dan buzzer, serta bertindak sebagai klien MQTT yang mengirim dan menerima data melalui broker.

2.1.2      MQTT

MQTT adalah protokol pengiriman pesan yang ringan dan menggunakan pola publish/subscribe. Perangkat yang mengirim data disebut publisher, perangkat yang menerima data disebut subscriber, dan keduanya dihubungkan oleh broker. Pesan dikirim ke sebuah topic, dan hanya klien yang berlangganan topic tersebut yang menerima pesannya. Protokol ini dirancang oleh Andy Stanford-Clark (IBM) dan Arlen Nipper pada tahun 1999 untuk aplikasi industri. MQTT juga mendukung fitur retained message, yaitu broker menyimpan pesan terakhir pada suatu topic sehingga klien yang baru terhubung langsung memperoleh data terakhir.

2.1.3      WebSocket

WebSocket adalah protokol komunikasi yang berjalan di atas koneksi TCP dan bersifat full duplex, yaitu data dapat mengalir dua arah secara bersamaan. Koneksinya bersifat persisten sehingga tetap terbuka hingga ditutup secara eksplisit, berbeda dengan HTTP yang umumnya ditutup setelah setiap permintaan dan respons. Karakteristik ini sesuai untuk pembaruan data real-time.

2.1.4      MQTT melalui WebSocket dan Paho JavaScript

Peramban web tidak dapat membuka koneksi TCP MQTT secara langsung, sehingga MQTT dibawa melalui WebSocket. Paho adalah proyek di Eclipse Foundation yang menyediakan pustaka klien MQTT open source untuk berbagai bahasa pemrograman, termasuk JavaScript. Dengan pustaka Paho JavaScript, halaman HTML dapat melakukan koneksi ke broker, berlangganan topic, serta mengirim pesan.

2.1.5      Broker MQTT HiveMQ

HiveMQ menyediakan broker MQTT publik (broker.hivemq.com) yang dapat digunakan untuk pengujian tanpa pendaftaran. Broker ini menerima koneksi MQTT melalui TCP pada port 1883 dan melalui WebSocket pada port 8000 (tanpa enkripsi) serta 8884 (dengan enkripsi). Karena bersifat publik, nama topic perlu dibuat unik agar tidak bertabrakan dengan pengguna lain.

2.1.6      LCD I2C

LCD 16x2 dengan modul I2C menampilkan teks dua baris, masing-masing 16 karakter, dan hanya memerlukan dua pin data (SDA dan SCL) untuk berkomunikasi dengan mikrokontroler. Pada sistem ini LCD menampilkan nomor yang sedang dipanggil dan sisa antrian.

2.1.7      Push Button dan Buzzer

Push button adalah saklar yang mengalirkan sinyal ketika ditekan. Pada praktikum ini tombol dihubungkan ke GND dan dibaca dengan mode INPUT_PULLUP sehingga pin bernilai LOW ketika tombol ditekan. Buzzer adalah perangkat keluaran yang menghasilkan bunyi dan digunakan sebagai penanda saat nomor diambil maupun dipanggil.

2.1.8      Wokwi dan GitHub Pages

Wokwi adalah simulator elektronik berbasis web yang memungkinkan pengujian program dan rangkaian ESP32 secara virtual. GitHub Pages adalah layanan hosting situs statis dari GitHub yang digunakan untuk mempublikasikan halaman web antrian sehingga dapat dibuka melalui tautan.

2.2  Komponen

 

No	Komponen	Jumlah	Fungsi
1	ESP32	1	Mikrokontroler pengendali sistem sekaligus klien MQTT
2	LCD 16x2 (I2C)	1	Menampilkan nomor yang dipanggil dan sisa antrian
3	Push button hijau	1	Tombol pengunjung untuk mengambil nomor antrian
4	Push button kuning	1	Tombol petugas untuk memanggil nomor berikutnya
5	Buzzer	1	Memberikan bunyi saat nomor diambil dan dipanggil
6	Broker MQTT HiveMQ (publik)	1	Perantara pertukaran pesan antara ESP32 dan web
7	Halaman web (HTML, JavaScript, Paho JS)	1	Dasbor antrian dan pengirim perintah panggil/reset
8	GitHub Pages	1	Hosting halaman web agar dapat diakses melalui tautan
9	Wokwi	1	Simulator rangkaian dan program ESP32

Tabel 2.1 Daftar komponen dan fungsinya

 

BAB 3              
PEMBAHASAN

3.1  Penjelasan Simulasi

Pada simulasi ini dirancang sebuah sistem antrian digital layanan akademik berbasis ESP32 dengan dua sisi antarmuka, yaitu perangkat di loket (tombol, LCD, dan buzzer) dan halaman web sebagai dasbor. Keduanya saling berkomunikasi melalui broker MQTT. Rangkaian dibuat pada platform Wokwi seperti ditunjukkan pada Gambar 3.1.

Gambar 3.1 Rangkaian Simulasi Sistem Antrian Digital Menggunakan ESP32

Berdasarkan Gambar 3.1, ESP32 berfungsi sebagai pusat pengendali sistem. Tombol hijau digunakan pengunjung untuk mengambil nomor antrian, tombol kuning digunakan petugas untuk memanggil nomor berikutnya, LCD menampilkan status antrian, dan buzzer memberikan penanda bunyi.

Prinsip kerja sistem secara keseluruhan adalah:

Tombol / Web  →  ESP32  ↔  Broker MQTT (HiveMQ)  ↔  Halaman Web

1. Pengunjung menekan tombol hijau sehingga ESP32 menambah nomor antrian terakhir, memperbarui LCD, membunyikan buzzer satu kali, lalu mengirim data ke broker MQTT.
2. Halaman web yang berlangganan topic yang sama menerima data tersebut dan memperbarui tampilan nomor terakhir serta sisa antrian.
3. Petugas memanggil nomor berikutnya melalui tombol kuning pada perangkat atau tombol “Panggil nomor berikutnya” pada web. Perintah dari web dikirim ke topic perintah dan diterima ESP32.
4. ESP32 menambah nomor yang dipanggil, menampilkan “Nomor N / Ke loket!” pada LCD, membunyikan buzzer tiga kali, dan mengirim status terbaru ke web.
5. Halaman web menampilkan nomor yang sedang dipanggil serta mencatatnya pada riwayat panggilan.

Komunikasi antara ESP32 dan halaman web menggunakan tiga topic MQTT seperti pada Tabel 3.1. Pesan status dikirim dengan opsi retained sehingga halaman web yang baru dibuka langsung memperoleh kondisi antrian terakhir.

Topic MQTT	Arah	Fungsi
unesa/kelompokku3/antrian/terakhir	ESP32 → Web	Mengirim nomor antrian terakhir yang diambil
unesa/kelompokku3/antrian/dipanggil	ESP32 → Web	Mengirim nomor antrian yang sedang dipanggil
unesa/kelompokku3/antrian/cmd	Web → ESP32	Mengirim perintah “panggil” atau “reset”

Tabel 3.1 Topic MQTT yang digunakan

3.2 Konfigurasi Rangkaian

Komponen	Pin Komponen	Pin ESP32
Tombol hijau (ambil nomor)	Kaki 1 / Kaki 2	GPIO 4 / GND
Tombol kuning (panggil)	Kaki 1 / Kaki 2	GPIO 5 / GND
Buzzer	+ / −	GPIO 18 / GND
LCD I2C	SDA	GPIO 21
LCD I2C	SCL	GPIO 22
LCD I2C	VCC / GND	5V (VIN) / GND

Tabel 3.2 Konfigurasi pin pada ESP32

Kedua tombol tidak memerlukan resistor eksternal karena menggunakan mode INPUT_PULLUP pada program.

3.3  Program ESP32

Program ESP32 ditulis pada Arduino framework dengan pustaka PubSubClient untuk MQTT dan LiquidCrystal I2C untuk LCD. Program terhubung ke jaringan Wi-Fi simulasi Wokwi-GUEST, kemudian terhubung ke broker HiveMQ. Fungsi callback dijalankan setiap ada pesan masuk pada topic perintah, sedangkan tombol dibaca pada fungsi loop dengan jeda 300 ms untuk menghindari penekanan ganda.

#include <WiFi.h>

#include <PubSubClient.h>

#include <Wire.h>

#include <LiquidCrystal_I2C.h>

 

#define BTN_AMBIL   4    // tombol hijau

#define BTN_PANGGIL 5    // tombol kuning

#define BUZZER      18

 

const char* ssid        = "Wokwi-GUEST";

const char* password    = "";

const char* mqtt_server = "broker.hivemq.com";

const int   mqtt_port   = 1883;

 

// HARUS SAMA dengan PREFIX di antrian_web.html

const char* TOPIC_TERAKHIR  = "unesa/kelompokku3/antrian/terakhir";

const char* TOPIC_DIPANGGIL = "unesa/kelompokku3/antrian/dipanggil";

const char* TOPIC_CMD       = "unesa/kelompokku3/antrian/cmd";

 

WiFiClient espClient;

PubSubClient client(espClient);

LiquidCrystal_I2C lcd(0x27, 16, 2);

 

int terakhir  = 0;

int dipanggil = 0;

unsigned long lastPress = 0;

 

void tampilLCD() {

  lcd.clear();

  lcd.setCursor(0, 0);

  lcd.print("Dipanggil: ");

  lcd.print(dipanggil);

  lcd.setCursor(0, 1);

  lcd.print("Sisa antrian: ");

  lcd.print(terakhir - dipanggil);

}

 

void bunyi(int kali) {

  for (int k = 0; k < kali; k++) {

    for (int i = 0; i < 150; i++) {

      digitalWrite(BUZZER, HIGH);

      delayMicroseconds(500);

      digitalWrite(BUZZER, LOW);

      delayMicroseconds(500);

    }

    delay(100);

  }

}

 

void kirimStatus() {

  client.publish(TOPIC_TERAKHIR, String(terakhir).c_str(), true);

  client.publish(TOPIC_DIPANGGIL, String(dipanggil).c_str(), true);

}

 

void resetAntrian() {

  terakhir = 0;

  dipanggil = 0;

  kirimStatus();

  tampilLCD();

  bunyi(1);

}

 

void panggilBerikutnya() {

  if (dipanggil < terakhir) {

    dipanggil++;

    kirimStatus();

    lcd.clear();

    lcd.setCursor(0, 0);

    lcd.print("Nomor ");

    lcd.print(dipanggil);

    lcd.setCursor(0, 1);

    lcd.print("Ke loket!");

    bunyi(3);

    delay(1500);

    tampilLCD();

  } else {

    lcd.clear();

    lcd.setCursor(0, 0);

    lcd.print("Antrian kosong");

    delay(1500);

    tampilLCD();

  }

}

 

void callback(char* topic, byte* payload, unsigned int length) {

  String pesan = "";

  for (unsigned int i = 0; i < length; i++) pesan += (char)payload[i];

  Serial.println("Pesan masuk: " + pesan);

 

  if (pesan == "panggil") {

    panggilBerikutnya();

  } else if (pesan == "reset") {

    resetAntrian();

  }

}

 

void connectWiFi() {

  Serial.print("Connecting WiFi");

  WiFi.begin(ssid, password, 6);

  while (WiFi.status() != WL_CONNECTED) {

    delay(300);

    Serial.print(".");

  }

  Serial.println(" OK");

}

 

void reconnectMQTT() {

  while (!client.connected()) {

    Serial.print("Connecting MQTT...");

    String clientId = "esp32-antrian-" + String(random(0xffff), HEX);

    if (client.connect(clientId.c_str())) {

      Serial.println(" OK");

      client.subscribe(TOPIC_CMD);

      kirimStatus();

    } else {

      Serial.print(" gagal, rc=");

      Serial.println(client.state());

      delay(2000);

    }

  }

}

 

void setup() {

  Serial.begin(115200);

  pinMode(BTN_AMBIL, INPUT_PULLUP);

  pinMode(BTN_PANGGIL, INPUT_PULLUP);

  pinMode(BUZZER, OUTPUT);

 

  lcd.init();

  lcd.backlight();

  lcd.print("Menyambung...");

 

  connectWiFi();

  client.setServer(mqtt_server, mqtt_port);

  client.setCallback(callback);

  reconnectMQTT();

 

  tampilLCD();

}

 

void loop() {

  if (!client.connected()) reconnectMQTT();

  client.loop();

 

  if (digitalRead(BTN_AMBIL) == LOW && millis() - lastPress > 300) {

    lastPress = millis();

    terakhir++;

    kirimStatus();

    tampilLCD();

    bunyi(1);

  }

 

  if (digitalRead(BTN_PANGGIL) == LOW && millis() - lastPress > 300) {

    lastPress = millis();

    panggilBerikutnya();

  }

}

3.4   Program Halaman Web

Halaman web dibuat dalam satu berkas HTML yang memuat pustaka Paho JavaScript dari CDN. Halaman terhubung ke broker melalui WebSocket (port 8884 saat diakses melalui HTTPS pada GitHub Pages), berlangganan topic status, dan mengirim perintah ke topic perintah. Tombol “Panggil nomor berikutnya” dinonaktifkan secara otomatis ketika sisa antrian bernilai nol. Potongan program utama ditunjukkan berikut ini.

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"></script>

 

const PREFIX = "unesa/kelompokku3/antrian";

const TOPIC_TERAKHIR  = PREFIX + "/terakhir";

const TOPIC_DIPANGGIL = PREFIX + "/dipanggil";

const TOPIC_CMD       = PREFIX + "/cmd";

 

const BROKER = "broker.hivemq.com";

const useSSL = location.protocol === "https:";

const PORT   = useSSL ? 8884 : 8000;

 

const client = new Paho.MQTT.Client(BROKER, PORT, "/mqtt", clientId);

 

client.onMessageArrived = (msg) => {

  const nilai = parseInt(msg.payloadString, 10);

  if (msg.destinationName === TOPIC_TERAKHIR)  terakhir = nilai;

  if (msg.destinationName === TOPIC_DIPANGGIL) dipanggil = nilai;

  render();

};

 

client.connect({

  useSSL: useSSL,

  onSuccess: () => {

    client.subscribe(TOPIC_TERAKHIR);

    client.subscribe(TOPIC_DIPANGGIL);

  }

});

 

function kirim(perintah) {

  const m = new Paho.MQTT.Message(perintah);

  m.destinationName = TOPIC_CMD;

  client.send(m);

}

 

btnPanggil.onclick = () => kirim("panggil");

btnReset.onclick   = () => kirim("reset");

Halaman web dipublikasikan melalui GitHub Pages sehingga dapat diakses dari peramban perangkat apa pun.

3.5 3.5 Hasil Pengujian

Pengujian dilakukan dengan menjalankan simulasi Wokwi dan membuka halaman web secara bersamaan. Hasil pengujian dirangkum pada Tabel 3.3 dan didokumentasikan pada Gambar 3.2 sampai Gambar 3.7.

No	Skenario Pengujian	Hasil pada ESP32 (LCD/Serial)	Hasil pada Web
1	Simulasi dijalankan	Serial Monitor: WiFi dan MQTT terhubung (OK). LCD: Dipanggil 0, Sisa antrian 0	Status “Terhubung ke broker”
2	Tombol hijau ditekan 3 kali	LCD: Sisa antrian 3, buzzer berbunyi tiap penekanan	Nomor terakhir dan sisa antrian ikut bertambah
3	Tombol kuning ditekan	LCD: “Nomor 4 / Ke loket!”, buzzer berbunyi 3 kali, lalu sisa antrian berkurang 1	Nomor dipanggil berubah dan riwayat bertambah
4	Tombol “Panggil nomor berikutnya” di web diklik	Serial: “Pesan masuk: panggil”. LCD: “Nomor 4 / Ke loket!”	Nomor dipanggil 4, nomor terakhir 6, sisa antrian 2, riwayat terisi
5	Sisa antrian 0	LCD: Dipanggil 2, Sisa antrian 0	Tombol “Panggil nomor berikutnya” nonaktif (abu-abu)

Tabel 3.3 Hasil pengujian sistem

Gambar 3.2 Tampilan LCD saat kondisi awal (antrian kosong)

Gambar 3.3 Tampilan LCD setelah tombol hijau ditekan 3 kali

Gambar 3.4 Tampilan LCD saat nomor dipanggil

Gambar 3.5 Serial Monitor yang menunjukkan koneksi WiFi dan MQTT berhasil

Gambar 3.6 Tampilan halaman web antrian pada GitHub Pages

Gambar 3.7 Pengujian komunikasi dua arah: halaman web (kiri) dan simulasi Wokwi (kanan)

Gambar 3.7 menunjukkan bahwa perintah “panggil” dari halaman web diterima ESP32 (tercatat pada Serial Monitor) dan menyebabkan LCD menampilkan “Nomor 4 / Ke loket!”. Sebaliknya, data nomor antrian dari ESP32 tampil pada halaman web. Hal ini membuktikan komunikasi dua arah melalui MQTT dan WebSocket berjalan dengan baik.

Pada Serial Monitor juga terlihat pesan Connecting MQTT... OK muncul berulang. Hal ini menunjukkan koneksi ke broker publik sesekali terputus lalu disambungkan kembali secara otomatis oleh fungsi reconnectMQTT() pada program.

 

BAB 4
PENUTUP

4.1  Kesimpulan

Berdasarkan simulasi yang telah dilakukan, sistem antrian digital berbasis ESP32 berhasil dirancang menggunakan tombol sebagai masukan serta LCD dan buzzer sebagai keluaran. ESP32 mampu mengirim dan menerima data melalui protokol MQTT, dan halaman web mampu terhubung ke broker melalui WebSocket menggunakan Paho JavaScript.

Pengujian menunjukkan komunikasi dua arah berjalan real-time: pengambilan dan pemanggilan nomor pada perangkat tampil di halaman web, dan perintah panggil dari halaman web diterima serta dieksekusi oleh ESP32. Simulasi menggunakan Wokwi membantu proses perancangan sistem sebelum diterapkan pada perangkat nyata.

4.2  Saran

1. Sistem dapat dikembangkan dengan layar yang lebih besar atau tampilan web khusus untuk papan antrian di ruang tunggu.
2. Sistem dapat ditambah beberapa loket dengan topic yang berbeda untuk setiap loket.
3. Keamanan komunikasi dapat ditingkatkan dengan broker pribadi yang menggunakan autentikasi pengguna, karena broker publik dapat diakses siapa saja.
4. Pengujian selanjutnya dapat dilakukan menggunakan perangkat keras ESP32 secara langsung.

4.3  Tautan Simulasi dan Halaman Web

Simulasi Wokwi: https://wokwi.com/projects/479380466445926401

Halaman web antrian: https://fandyyapari.github.io/antrian-digital/

 

 

DAFTAR PUSTAKA

Banks, A., & Gupta, R. (Eds.). (2014). MQTT Version 3.1.1. OASIS Standard. https://docs.oasis-open.org/mqtt/mqtt/v3.1.1/mqtt-v3.1.1.html

Eclipse Foundation. (n.d.). Eclipse Paho: MQTT and MQTT-SN software. https://eclipse.dev/paho/

Espressif Systems. (n.d.). ESP32 series datasheet. https://www.espressif.com/en/support/documents/technical-documents

Fette, I., & Melnikov, A. (2011). The WebSocket Protocol (RFC 6455). Internet Engineering Task Force. https://www.rfc-editor.org/rfc/rfc6455

HiveMQ. (n.d.). Public MQTT broker. https://www.hivemq.com/mqtt/public-mqtt-broker/

O’Leary, N. (n.d.). PubSubClient: Arduino client for MQTT. https://github.com/knolleary/pubsubclient

Praktikum Internet of Things. (2026). Modul 6: MQTT melalui WebSocket. Program Studi Teknik Informatika, Universitas Negeri Surabaya.

Wokwi. (n.d.). Wokwi documentation. https://docs.wokwi.com/