“SIMULASI MQTT MELALUI WEBSOCKET UNTUK MENGONTROL BOOM GATE ESP32 DENGAN LCD, SERVO, DAN SENSOR PIR MENGGUNAKAN WOKWI”

Disusun oleh:

Gerizt Geovany Saragih Sumbayak 24051204117

Muhammad Naufal Zakcky Dzikrillah 24051204106

Mahdi Ghani Afriza 24051204119

Muhammad Risqi Gemilang 24051204181

BAB I

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi Internet of Things (IoT) memungkinkan perangkat elektronik saling terhubung melalui jaringan untuk melakukan pemantauan dan pengendalian dari jarak jauh. Salah satu mikrokontroler yang banyak digunakan dalam pengembangan sistem IoT adalah ESP32. Mikrokontroler ini memiliki konektivitas Wi-Fi dan dapat dihubungkan dengan berbagai komponen seperti layar LCD, motor servo, dan sensor.

Dalam sistem kendali berbasis jaringan, komunikasi antara halaman web dan perangkat mikrokontroler perlu dilakukan secara efisien. MQTT (Message Queuing Telemetry Transport) merupakan protokol pesan ringan yang menggunakan pola komunikasi publish/subscribe. Melalui broker MQTT, perangkat dan aplikasi dapat bertukar pesan tanpa harus terhubung secara langsung.

WebSocket memungkinkan komunikasi dua arah (full duplex) melalui koneksi yang tetap terbuka. Dengan menggabungkan MQTT dan WebSocket, halaman web berbasis JavaScript dapat berkomunikasi dengan broker MQTT. Library Paho MQTT JavaScript digunakan sebagai klien pada halaman web, sedangkan ESP32 menggunakan library PubSubClient untuk berkomunikasi dengan broker.

Pada praktikum ini dibuat simulasi sistem boom gate menggunakan ESP32 pada platform Wokwi. Pengguna mengisi NIM dan nama melalui halaman web, kemudian mengirim perintah untuk membuka gerbang. ESP32 menerima pesan melalui MQTT, menampilkan identitas pada LCD 20x4, dan menggerakkan servo sebagai palang gerbang. Sensor PIR digunakan untuk mendeteksi gerakan dan mengirimkan status melalui MQTT.

1.2 Rumusan Masalah

1. Bagaimana menghubungkan ESP32 ke jaringan Wi-Fi dan broker MQTT?

2. Bagaimana membuat halaman web yang berkomunikasi dengan broker MQTT melalui WebSocket?

3. Bagaimana mengirim data NIM dan nama dari halaman web ke ESP32?

4. Bagaimana mengendalikan servo sebagai palang gerbang dan menampilkan informasi pada LCD?

5. Bagaimana memanfaatkan sensor PIR untuk mendeteksi gerakan dan mengirimkan status melalui MQTT?

1.3 Tujuan Laporan

6. Memahami konsep MQTT dan WebSocket dalam komunikasi perangkat IoT.

7. Membuat halaman web berbasis HTML dan JavaScript menggunakan library Paho MQTT.

8. Menghubungkan ESP32 dengan broker MQTT HiveMQ melalui jaringan Wi-Fi Wokwi-GUEST.

9. Mengendalikan servo dan menampilkan identitas pengguna pada LCD berdasarkan pesan MQTT.

10. Menguji sensor PIR untuk mendeteksi gerakan dan mengirimkan status ke broker MQTT.

1.4 Manfaat Penulisan

11. Menambah pemahaman mengenai komunikasi publish/subscribe pada MQTT.

12. Melatih kemampuan mengintegrasikan program ESP32 dengan halaman web.

13. Memahami penggunaan WebSocket sebagai media komunikasi MQTT dari browser.

14. Menambah pengalaman melakukan simulasi perangkat IoT menggunakan Wokwi.

BAB II

TINJAUAN PUSTAKA

2.1 Dasar Teori

2.1.1 Internet of Things (IoT)

Internet of Things (IoT) merupakan konsep yang menghubungkan perangkat fisik, sensor, dan sistem komputasi melalui jaringan agar dapat mengumpulkan, mengirim, dan menerima data. Dalam proyek ini, ESP32, LCD, servo, dan sensor PIR menjadi bagian dari sistem IoT yang berkomunikasi melalui jaringan Wi-Fi dan broker MQTT.

2.1.2 WebSocket

WebSocket adalah protokol komunikasi yang berjalan di atas TCP dan menyediakan komunikasi dua arah secara bersamaan atau full duplex. Koneksi WebSocket tetap terbuka sehingga data dapat dikirim dari klien ke server maupun dari server ke klien tanpa harus membuat permintaan HTTP baru untuk setiap pertukaran data. Karakteristik tersebut mendukung pertukaran informasi secara real-time.

2.1.3 MQTT

MQTT (Message Queuing Telemetry Transport) merupakan protokol komunikasi pesan ringan yang menggunakan pola publish/subscribe. Klien mengirim pesan ke suatu topik melalui broker dengan proses publish. Klien lain yang melakukan subscribe pada topik tersebut akan menerima pesan yang diterbitkan. Pada proyek ini digunakan broker publik HiveMQ sebagai perantara komunikasi antara ESP32 dan halaman web.

2.1.4 MQTT melalui WebSocket

MQTT melalui WebSocket merupakan metode yang membungkus paket MQTT di dalam koneksi WebSocket. Metode ini memungkinkan aplikasi berbasis browser menggunakan JavaScript untuk berkomunikasi dengan broker MQTT. Dalam proyek ini, ESP32 menggunakan koneksi MQTT melalui TCP port 1883, sedangkan halaman web menggunakan WebSocket aman (WSS) melalui port 8884.

2.1.5 Paho MQTT dan PubSubClient

Paho MQTT merupakan library klien MQTT yang dikembangkan dalam proyek Eclipse Paho dan menyediakan dukungan untuk beberapa bahasa pemrograman, termasuk JavaScript. Pada proyek ini Paho MQTT digunakan pada halaman web untuk terhubung ke broker melalui WebSocket. Sementara itu, library PubSubClient digunakan pada ESP32 untuk melakukan koneksi MQTT, subscribe terhadap topik perintah, dan publish status sistem.

2.2 Komponen dan Perangkat Utama

2.2.1 Mikrokontroler ESP32

ESP32 berfungsi sebagai pengendali utama sistem. ESP32 terhubung ke jaringan Wi-Fi Wokwi-GUEST, berkomunikasi dengan broker MQTT, membaca sensor PIR, mengendalikan servo, serta mengirimkan informasi ke LCD.

2.2.2 LCD 20x4 I2C

LCD 20x4 I2C merupakan layar yang dapat menampilkan empat baris dengan kapasitas 20 karakter pada setiap baris. Komunikasi I2C menggunakan jalur SDA dan SCL sehingga jumlah kabel data yang diperlukan lebih sedikit. LCD pada proyek ini digunakan untuk menampilkan NIM, nama, dan status gerbang.

2.2.3 Motor Servo

Motor servo digunakan sebagai penggerak palang boom gate. Posisi servo diatur menggunakan sinyal PWM dari ESP32. Pada program ini, sudut 0 derajat digunakan untuk menunjukkan kondisi gerbang tertutup, sedangkan sudut 90 derajat digunakan untuk menunjukkan kondisi gerbang terbuka.

2.2.4 Sensor PIR

Sensor PIR (Passive Infrared) digunakan untuk mendeteksi gerakan berdasarkan perubahan radiasi inframerah di area jangkauannya. Ketika gerakan terdeteksi, keluaran sensor menjadi HIGH. ESP32 membaca perubahan tersebut dan mengirimkan pesan GERAKAN_TERDETEKSI melalui topik status MQTT.

2.2.5 Broker MQTT HiveMQ

Broker MQTT berfungsi sebagai perantara pertukaran pesan antara ESP32 dan halaman web. Pada proyek ini digunakan broker publik broker.hivemq.com. ESP32 terhubung menggunakan port TCP 1883, sedangkan halaman web terhubung melalui WebSocket aman pada port 8884. Topik komunikasi dibuat dengan menyertakan NIM agar pesan proyek memiliki identitas topik tersendiri.

2.2.6 Simulator Wokwi

Wokwi merupakan platform simulasi rangkaian elektronika dan mikrokontroler. Pada proyek ini Wokwi digunakan untuk menjalankan ESP32 dan komponen pendukung secara virtual serta menyediakan jaringan Wi-Fi simulasi Wokwi-GUEST untuk menguji koneksi ke broker MQTT.

BAB III

PEMBAHASAN

3.1 Penjelasan Simulasi

Simulasi ini bertujuan menguji komunikasi antara halaman web dan ESP32 menggunakan MQTT melalui WebSocket. Halaman web berfungsi sebagai antarmuka pengguna untuk mengirim identitas berupa NIM dan nama. ESP32 menerima pesan tersebut melalui broker MQTT, kemudian menampilkan identitas pada LCD dan menggerakkan servo untuk membuka palang gerbang.

15. Inisialisasi sistem: ESP32 menginisialisasi LCD, servo, dan sensor PIR. Servo ditempatkan pada sudut 0 derajat sebagai kondisi awal gerbang tertutup.

16. Koneksi Wi-Fi: ESP32 terhubung ke jaringan Wokwi-GUEST dan memperoleh alamat IP dari jaringan simulasi.

17. Koneksi MQTT: ESP32 terhubung ke broker broker.hivemq.com melalui port 1883, kemudian melakukan subscribe pada topik perintah dan publish status ONLINE.

18. Koneksi halaman web: halaman index.html menggunakan Paho MQTT JavaScript untuk terhubung ke broker melalui WebSocket aman pada port 8884 dan melakukan subscribe pada topik status.

19. Pengiriman perintah: pengguna memasukkan NIM dan nama pada halaman web, kemudian menekan tombol BUKA GERBANG. Halaman web mengirim pesan dengan format NIM|NAMA ke topik perintah.

20. Eksekusi perintah: ESP32 menerima pesan, memisahkan NIM dan nama, menampilkan informasi pada LCD, menggerakkan servo ke 90 derajat, dan mengirim status OPEN.

21. Penutupan otomatis: setelah lima detik, servo kembali ke posisi 0 derajat. ESP32 mengirim status CLOSED dan LCD kembali ke tampilan siaga.

22. Deteksi gerakan: ketika PIR mendeteksi gerakan baru, ESP32 mengirim pesan GERAKAN_TERDETEKSI ke topik status MQTT.

3.2 Konfigurasi Rangkaian

Komponen / Pin	Koneksi	Fungsi
LCD SDA	ESP32 GPIO 21	Jalur data I2C LCD
LCD SCL	ESP32 GPIO 22	Jalur clock I2C LCD
LCD VCC	ESP32 5V	Catu daya LCD
LCD GND	ESP32 GND	Ground LCD
Servo PWM / Signal	ESP32 GPIO 18	Mengatur posisi sudut servo
Servo V+	ESP32 5V	Catu daya servo
Servo GND	ESP32 GND	Ground servo
PIR OUT	ESP32 GPIO 19	Keluaran deteksi gerakan
PIR VCC	ESP32 5V	Catu daya PIR
PIR GND	ESP32 GND	Ground PIR
Wi-Fi ESP32	Wokwi-GUEST	Koneksi jaringan simulasi

Tabel 3.1 Konfigurasi rangkaian simulasi ESP32

Gambar 3.1 Rangkaian simulasi pada Wokwi

3.3 Konfigurasi Komunikasi MQTT

Komunikasi MQTT menggunakan dua topik utama yang dibentuk berdasarkan NIM 24051204117. Topik perintah digunakan oleh halaman web untuk mengirim data identitas ke ESP32, sedangkan topik status digunakan ESP32 untuk mengirimkan informasi kondisi sistem ke halaman web.

Parameter	Nilai
Broker	broker.hivemq.com
Port MQTT ESP32	1883
Port WebSocket halaman web	8884 (WSS)
Topik perintah	unesa/iot/modul6/24051204117/gate
Topik status	unesa/iot/modul6/24051204117/status
Format pesan perintah	NIM\|NAMA
Contoh pesan	24051204117\|gerizt

Topik perintah di-subscribe oleh ESP32. Halaman web melakukan publish pesan identitas ke topik tersebut. Sebaliknya, ESP32 melakukan publish status ke topik status, sementara halaman web melakukan subscribe untuk menerima status OPEN, CLOSED, ONLINE, dan GERAKAN_TERDETEKSI.

3.4 Program Simulasi ESP32

Program ESP32 dibuat menggunakan Arduino C++ dengan library WiFi, PubSubClient, Wire, LiquidCrystal_I2C, dan ESP32Servo. Program menghubungkan ESP32 ke Wi-Fi dan broker MQTT, menerima pesan dari halaman web, mengendalikan servo, memperbarui tampilan LCD, serta membaca sensor PIR.

Bagian konfigurasi utama program yang digunakan adalah sebagai berikut:

#include <WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <LiquidCrystal_I2C.h>
#include <ESP32Servo.h>

const char* WIFI_SSID = "Wokwi-GUEST";
const char* WIFI_PASS = "";

const char* MQTT_HOST = "broker.hivemq.com";
const int MQTT_PORT = 1883;
const char* NIM_ID = "24051204117";

String TOPIC_CMD =
String("unesa/iot/modul6/") + NIM_ID + "/gate";
String TOPIC_STATUS =
String("unesa/iot/modul6/") + NIM_ID + "/status";

#define PIN_SERVO 18
#define PIN_PIR 19

#define SERVO_TUTUP 0
#define SERVO_BUKA 90

const unsigned long DURASI_BUKA = 5000;

WiFiClient espClient;
PubSubClient mqtt(espClient);
LiquidCrystal_I2C lcd(0x27, 20, 4);
Servo gerbang;

Fungsi cek pesan MQTT menerima payload dengan format NIM|NAMA. Program memisahkan data berdasarkan karakter garis vertikal, kemudian memanggil fungsi bukaGerbang(). Fungsi tersebut menampilkan NIM dan nama pada LCD, menggerakkan servo ke 90 derajat, menyimpan waktu pembukaan, serta mengirim status OPEN.

void bukaGerbang(String nim, String nama) {
lcd.clear();
tampilBaris(0, "NIM: " + nim);
tampilBaris(1, "Nama: " + nama);
tampilBaris(2, "Silahkan Masuk!");
tampilBaris(3, "Gerbang: TERBUKA");

gerbang.write(SERVO_BUKA);
gerbangTerbuka = true;
waktuBuka = millis();

mqtt.publish(TOPIC_STATUS.c_str(), "OPEN");
}

Fungsi tutupGerbang() mengembalikan servo ke sudut 0 derajat, mengubah status gerbang menjadi tertutup, mengirim status CLOSED, dan menampilkan kembali layar siaga. Pada fungsi loop(), waktu pembukaan diperiksa menggunakan millis() agar gerbang dapat menutup otomatis setelah lima detik.

if (gerbangTerbuka &&
millis() - waktuBuka >= DURASI_BUKA) {
tutupGerbang();
}

Sensor PIR diperiksa secara berkala melalui digitalRead(). Ketika keluaran PIR berubah dari LOW menjadi HIGH dan jeda minimal tiga detik telah terpenuhi, ESP32 mengirim pesan GERAKAN_TERDETEKSI ke topik status dan menampilkan informasi deteksi pada Serial Monitor.

int pir = digitalRead(PIN_PIR);

if (pir == HIGH &&
    pirSebelumnya == LOW &&
    millis() - pirTerakhir > 3000) {

mqtt.publish(
    TOPIC_STATUS.c_str(),
    "GERAKAN_TERDETEKSI"
);

Serial.println("Gerakan terdeteksi!");
pirTerakhir = millis();
}

pirSebelumnya = pir;

3.5 Program Halaman Web

Halaman web dibuat menggunakan HTML, CSS, dan JavaScript. Library Paho MQTT dimuat melalui CDN. Halaman web menyediakan kolom input NIM dan nama, tombol BUKA GERBANG, indikator koneksi MQTT, status gerbang, serta log aktivitas.

Saat halaman dibuka, fungsi hubungkan() membuat klien Paho MQTT dan menghubungkannya ke broker HiveMQ menggunakan WebSocket aman pada port 8884 dengan path /mqtt. Setelah koneksi berhasil, halaman web melakukan subscribe pada topik status. Ketika tombol BUKA GERBANG ditekan, fungsi kirimPesan() mengirim data NIM dan nama dengan format NIM|NAMA ke topik perintah.

Ketika pesan status diterima, halaman web menuliskannya pada bagian log aktivitas. Status OPEN dan CLOSED juga digunakan untuk memperbarui keterangan kondisi gerbang pada halaman web.

3.6 Hasil Pengujian

Pengujian dilakukan menggunakan simulasi Wokwi, Serial Monitor ESP32, LCD, servo, sensor PIR, dan halaman web yang dibuka melalui browser. Hasil pengujian berdasarkan proses yang telah dijalankan adalah sebagai berikut.

No.	Pengujian	Hasil Pengamatan	Status
1	Koneksi Wi-Fi ESP32	Serial Monitor menampilkan WiFi connected dan alamat IP 10.10.0.2.	Berhasil
2	Koneksi broker MQTT	Serial Monitor menampilkan MQTT connected.	Berhasil
3	Koneksi halaman web	Halaman menampilkan status MQTT: TERHUBUNG dan log berhasil terhubung ke MQTT.	Berhasil
4	Pengiriman data identitas	Pesan 24051204117\|gerizt diterima ESP32.	Berhasil
5	Tampilan LCD	LCD menampilkan NIM 24051204117 dan nama Gerizt.	Berhasil
6	Pembukaan gerbang	Servo bergerak ke posisi 90 derajat dan Serial Monitor menampilkan GERBANG TERBUKA.	Berhasil
7	Penutupan otomatis	Setelah lima detik, servo kembali ke posisi 0 derajat dan Serial Monitor menampilkan GERBANG TERTUTUP.	Berhasil
8	Deteksi PIR	Setelah tombol Simulate motion digunakan, Serial Monitor menampilkan Gerakan terdeteksi!.	Berhasil

3.6.1 Pengujian Koneksi Wi-Fi dan MQTT

Pada saat simulasi dijalankan, ESP32 berhasil terhubung ke jaringan Wokwi-GUEST. Serial Monitor menampilkan informasi WiFi connected dan alamat IP 10.10.0.2. Setelah itu ESP32 berhasil terhubung ke broker MQTT dan menampilkan pesan MQTT connected.

Gambar 3.2 Hasil koneksi ESP32 ke Wi-Fi dan broker MQTT

3.6.2 Pengujian Halaman Web

Halaman web berhasil dibuka melalui browser dan terhubung ke broker HiveMQ menggunakan MQTT melalui WebSocket. Indikator pada halaman menampilkan status MQTT: TERHUBUNG. Log aktivitas juga menampilkan pesan Berhasil terhubung ke MQTT.

Gambar 3.3 Halaman web berhasil terhubung ke broker MQTT

3.6.3 Pengujian Pengiriman Perintah dan Servo

Pengguna memasukkan NIM 24051204117 dan nama gerizt, kemudian menekan tombol BUKA GERBANG. ESP32 menerima pesan dengan format 24051204117|gerizt. LCD menampilkan NIM dan nama tersebut, kemudian servo bergerak ke posisi terbuka. Setelah lima detik, servo kembali ke posisi tertutup secara otomatis.

Gambar 3.4 LCD menampilkan identitas pengguna dan servo membuka gerbang

[Sisipkan screenshot Serial Monitor yang menampilkan pesan diterima, GERBANG TERBUKA, dan GERBANG TERTUTUP]

Gambar 3.5 Hasil penerimaan pesan dan perubahan status gerbang pada Serial Monitor

3.6.4 Pengujian Sensor PIR

Pengujian sensor PIR dilakukan dengan menekan tombol Simulate motion pada panel sensor di Wokwi. Setelah sensor mendeteksi gerakan, ESP32 membaca keluaran HIGH dan menampilkan pesan Gerakan terdeteksi! pada Serial Monitor. Program juga mengirimkan status GERAKAN_TERDETEKSI melalui topik status MQTT.

Gambar 3.6 Hasil pengujian deteksi gerakan sensor PIR

3.7 Analisis Hasil

Berdasarkan pengujian, komunikasi antara halaman web dan ESP32 melalui broker MQTT berhasil dilakukan. Halaman web dapat mengirim data identitas, sedangkan ESP32 dapat menerima dan memproses pesan tersebut. LCD berhasil menampilkan identitas pengguna dan servo dapat membuka serta menutup gerbang secara otomatis.

Pengujian sensor PIR juga menunjukkan bahwa ESP32 dapat membaca perubahan keluaran sensor dan mengirimkan status deteksi gerakan melalui MQTT. Dengan demikian, fungsi utama sistem boom gate yang terdiri dari komunikasi MQTT-WebSocket, tampilan LCD, kendali servo, dan deteksi gerakan telah berhasil disimulasikan.

BAB IV

PENUTUP

4.1 Kesimpulan

23. Komunikasi MQTT melalui WebSocket memungkinkan halaman web berbasis JavaScript berkomunikasi dengan broker MQTT dan bertukar pesan dengan ESP32.

24. ESP32 berhasil terhubung ke jaringan Wi-Fi Wokwi-GUEST dan broker HiveMQ. Halaman web juga berhasil terhubung ke broker melalui WebSocket aman.

25. Perintah yang dikirim dari halaman web dengan format NIM|NAMA berhasil diterima ESP32. Data NIM dan nama ditampilkan pada LCD, kemudian servo membuka gerbang pada sudut 90 derajat.

26. Servo dapat kembali ke sudut 0 derajat secara otomatis setelah lima detik, sehingga gerbang kembali ke kondisi tertutup.

27. Sensor PIR berhasil mendeteksi gerakan dan ESP32 mengirimkan status GERAKAN_TERDETEKSI melalui MQTT.

4.2 Saran

28. Sistem dapat dikembangkan dengan menambahkan autentikasi pengguna agar perintah pembukaan gerbang hanya dapat dilakukan oleh pihak yang memiliki izin.

29. Penggunaan broker MQTT pribadi dengan autentikasi dan enkripsi dapat meningkatkan keamanan komunikasi.

30. Sistem dapat dikembangkan dengan menambahkan pembaca QR atau RFID sebagai metode identifikasi pengguna.

31. Pengujian lanjutan dapat dilakukan menggunakan perangkat ESP32 dan komponen fisik untuk membandingkan hasil simulasi dengan implementasi nyata.

DAFTAR PUSTAKA

Eclipse Foundation. (n.d.). Eclipse Paho MQTT JavaScript Client. https://www.eclipse.org/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

OASIS. (2014). MQTT Version 3.1.1. OASIS Standard. https://docs.oasis-open.org/mqtt/mqtt/v3.1.1/

Program Studi Informatika, Universitas Negeri Surabaya. (n.d.). Modul 6: MQTT melalui WebSocket. Materi perkuliahan.

Steve's Internet Guide. (n.d.). Using the JavaScript MQTT Client with WebSockets. http://www.steves-internet-guide.com/using-javascript-mqtt-client-websockets/

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

Sabtu, 14 November 2026

SIMULASI MQTT MELALUI WEBSOCKET UNTUK MENGONTROL BOOM GATE ESP32 DENGAN LCD, SERVO, DAN SENSOR PIR MENGGUNAKAN WOKWI