DIYables ESP32 WebServer merupakan library yang dirancang untuk memudahkan pembuatan web server berbasis ESP32. Library ini mendukung pembuatan website dengan satu maupun beberapa halaman (multi-page web server) serta telah dilengkapi dengan fitur WebSocket untuk komunikasi data secara real-time. Dengan library ini, Anda dapat mengembangkan berbagai proyek Internet of Things (IoT), seperti sistem monitoring sensor, kontrol perangkat melalui browser, dashboard berbasis web, hingga aplikasi yang membutuhkan pertukaran data secara langsung tanpa harus melakukan refresh halaman.
Perangkat Keras yang Dibutuhkan
Sebelum mulai menggunakan library ini, siapkan beberapa perangkat berikut:
- ESP32 Dev Module (ESP-WROOM-32 38 Pin)
- Kabel USB untuk menghubungkan ESP32 ke komputer
Cara Menginstal Library DIYables ESP32 WebServer
Agar library dapat digunakan di dalam Arduino IDE, lakukan langkah-langkah berikut:
1. Hubungkan board ESP32 ke komputer menggunakan kabel USB.
2. Buka Arduino IDE.
3. Pilih jenis board ESP32 yang digunakan beserta port COM yang sesuai.
4. Klik menu Library Manager pada bagian kiri Arduino IDE.
5. Pada kolom pencarian, ketik Web Server for ESP32 atau mWebSockets.
6. Pilih library mWebSockets by DIYables, kemudian klik Install.
7. Tunggu hingga proses instalasi selesai.
Setelah proses instalasi berhasil, library sudah siap digunakan pada program Arduino.
Dukungan WebSocket Bawaan
Salah satu keunggulan DIYables ESP32 WebServer adalah dukungan WebSocket yang telah terintegrasi langsung di dalam library. Artinya, Anda tidak perlu lagi memasang library WebSocket tambahan karena seluruh fungsinya sudah tersedia secara bawaan. Implementasi WebSocket pada library ini dikembangkan berdasarkan library mWebSockets karya Dawid Kurek, kemudian dioptimalkan agar bekerja lebih efisien pada platform ESP32. Beberapa kelebihan yang ditawarkan antara lain:
- Tidak memerlukan library tambahan karena dukungan WebSocket sudah tersedia secara bawaan.
- Dioptimalkan khusus untuk ESP32, sehingga penggunaan memori dan performanya lebih efisien.
- Menggunakan WiFi Stack bawaan ESP32, sehingga kompatibilitas jaringan menjadi lebih baik.
- Mendukung standar RFC 6455, yaitu standar resmi protokol WebSocket.
- Memungkinkan komunikasi dua arah (bidirectional communication) secara real-time antara ESP32 dan browser.
Dengan adanya WebSocket, browser dapat menerima perubahan data secara langsung tanpa perlu melakukan refresh halaman. Fitur ini sangat berguna untuk aplikasi monitoring maupun kontrol perangkat IoT.
Cara Menggunakan Library
Untuk menggunakan seluruh fitur Web Server beserta WebSocket, cukup tambahkan satu baris berikut pada bagian awal program.
#include <DIYables_ESP32_WebServer.h>
Setelah library di-include, seluruh fitur WebSocket dapat digunakan secara otomatis apabila dibutuhkan. Keuntungan pendekatan ini adalah compiler hanya akan menyertakan kode yang benar-benar digunakan. Dengan demikian, penggunaan memori program menjadi lebih hemat.
Class DIYables_ESP32_WebServer
Class DIYables_ESP32_WebServer merupakan class utama yang digunakan untuk membuat, mengonfigurasi, dan menjalankan web server pada ESP32. Melalui class ini, Anda dapat membuat web server pada port tertentu, menambahkan halaman web, menangani permintaan HTTP, mengirimkan respons ke browser, dan mengelola komunikasi WebSocket.
1. Constructor
Constructor digunakan untuk membuat objek web server.
DIYables_ESP32_WebServer(int port = 80)
Parameter:
- port → Nomor port yang digunakan web server. Nilai bawaan (default) adalah 80, yaitu port standar untuk layanan HTTP.
Contoh:
DIYables_ESP32_WebServer server;
atau
DIYables_ESP32_WebServer server(8080);
Pada contoh pertama, server berjalan pada port 80, sedangkan contoh kedua menggunakan port 8080.
2. Method begin()
Method begin() digunakan untuk menjalankan web server sehingga ESP32 mulai menerima koneksi dari browser atau perangkat lain. Library menyediakan dua bentuk pemanggilan.
void begin()
dan
void begin(const char* ssid, const char* password)
a. begin()
Digunakan apabila ESP32 telah terhubung ke jaringan WiFi melalui kode program yang dibuat sendiri.
server.begin();
Pada metode ini, proses koneksi WiFi dilakukan secara terpisah sebelum web server dijalankan.
b. begin(ssid, password)
Digunakan apabila ingin menghubungkan ESP32 ke jaringan WiFi sekaligus menjalankan web server dalam satu langkah.
server.begin(ssid, password);
Cara ini lebih sederhana, namun biasanya digunakan untuk menjaga kompatibilitas dengan versi library sebelumnya (legacy).
3. Method setNotFoundHandler()
Method ini digunakan untuk menentukan tindakan ketika browser mengakses alamat (URL) yang tidak tersedia pada web server.
void setNotFoundHandler(RouteHandler handler)
Jika pengguna membuka halaman yang tidak terdaftar, maka fungsi handler yang telah ditentukan akan dijalankan. Fitur ini berguna untuk membuat halaman 404 Not Found yang lebih informatif dibandingkan pesan kesalahan bawaan.
4. Method printWifiStatus()
Method ini digunakan untuk menampilkan informasi koneksi WiFi melalui Serial Monitor.
void printWifiStatus()
Informasi yang ditampilkan umumnya seperti status koneksi WiFi, nama jaringan (SSID), dan alamat IP ESP32. Method ini sangat membantu ketika melakukan proses pengujian (debugging), karena Anda dapat mengetahui alamat IP yang harus diakses melalui browser.
5. Method handleClient()
Method handleClient() berfungsi memproses setiap permintaan (HTTP Request) yang dikirim oleh browser.
void handleClient()
Method ini harus dipanggil secara terus-menerus di dalam fungsi loop(), agar setiap permintaan dari klien dapat diproses.
Contoh:
void loop() {
server.handleClient();
}
Jika method ini tidak dipanggil, maka web server tidak akan merespons permintaan dari browser meskipun koneksi WiFi sudah berhasil dilakukan.
6. Method on()
Method on() digunakan untuk menghubungkan suatu alamat URL dengan fungsi tertentu.
void on(const String &uri, HTTPMethod method, THandlerFunction fn)
atau
void on(const String &uri, THandlerFunction fn)
Parameter yang digunakan meliputi:
- uri → Alamat URL, misalnya /, /led, atau /sensor.
- method → Jenis metode HTTP, seperti GET, POST, PUT, maupun DELETE.
- fn → Fungsi yang akan dijalankan ketika URL tersebut diakses.
Namun, perlu diperhatikan bahwa pada DIYables ESP32 WebServer, fungsi yang digunakan sebenarnya adalah addRoute(), bukan on() seperti pada beberapa library web server lainnya. Oleh karena itu, pada praktiknya Anda akan lebih sering menggunakan addRoute() untuk membuat halaman maupun API pada web server.
7. Method sendResponse()
Method sendResponse() digunakan untuk mengirimkan HTTP Response dari ESP32 ke browser atau perangkat klien yang melakukan permintaan (request). Respons yang dikirim dapat berupa halaman HTML, data JSON, maupun teks biasa (plain text). Sintaks dasar method ini adalah sebagai berikut:
void sendResponse(WiFiClient& client,
const char* content,
const char* contentType = "text/html")
a. Parameter sendResponse()
Method ini memiliki tiga parameter utama, yaitu:
- client → Objek WiFiClient yang mewakili koneksi dengan browser. Parameter ini biasanya sudah tersedia pada fungsi handler.
- content → Data atau isi respons yang akan dikirim ke klien.
- contentType → Menentukan jenis data (MIME Type) yang dikirim. Secara bawaan menggunakan nilai "text/html".
Beberapa nilai Content-Type yang sering digunakan antara lain:
- text/html → Mengirim halaman web.
- application/json → Mengirim data dalam format JSON.
- text/plain → Mengirim teks biasa.
b. Contoh Penggunaan sendResponse()
Mengirim halaman HTML:
server.sendResponse(client, "<h1>Hello World</h1>");
Mengirim data JSON:
server.sendResponse(client, "{\"status\":\"ok\"}", "application/json");
Mengirim teks biasa:
server.sendResponse(client, "Success", "text/plain");
Method ini merupakan cara paling sederhana untuk mengirim respons HTTP tanpa harus membuat sendiri header HTTP secara manual.
8. Metode Otentikasi HTTP
Pada aplikasi tertentu, tidak semua halaman web boleh diakses oleh sembarang pengguna. Misalnya halaman konfigurasi WiFi, pengaturan perangkat, atau panel administrator. Untuk kebutuhan tersebut, DIYables ESP32 WebServer menyediakan fitur HTTP Basic Authentication yang dapat diaktifkan hanya dengan beberapa baris kode.
a. Method enableAuthentication()
Method enableAuthentication() digunakan untuk mengaktifkan sistem autentikasi pada seluruh halaman (route) yang terdapat di dalam web server.
void enableAuthentication(
const char* username,
const char* password,
const char* realm = "ESP32 Server"
)
Setelah autentikasi diaktifkan, setiap pengguna yang mengakses web server akan diminta memasukkan username dan password sebelum halaman ditampilkan.
b. Parameter enableAuthentication()
- username → Nama pengguna untuk proses autentikasi (maksimal 31 karakter).
- password → Kata sandi autentikasi (maksimal 31 karakter).
- realm → Nama area autentikasi yang akan ditampilkan pada kotak dialog browser. Parameter ini bersifat opsional.
c. Contoh Penggunaan
Menggunakan nama realm bawaan:
server.enableAuthentication("admin", "password123");
Menggunakan realm khusus:
server.enableAuthentication(
"admin",
"secure456",
"My ESP32 Device"
);
Dengan fitur ini, akses ke web server menjadi lebih aman karena hanya pengguna yang memiliki kredensial yang benar yang dapat masuk.
9. Method disableAuthentication()
Method ini digunakan untuk menonaktifkan autentikasi sehingga seluruh halaman kembali dapat diakses tanpa login.
void disableAuthentication()
Contoh penggunaan:
server.disableAuthentication();
Method ini berguna ketika proses pengujian (testing) atau apabila web server memang tidak memerlukan sistem keamanan.
10. Method isAuthenticationEnabled()
Method isAuthenticationEnabled() digunakan untuk mengetahui apakah autentikasi saat ini sedang aktif atau tidak.
bool isAuthenticationEnabled()
Method ini akan mengembalikan nilai:
- true → Autentikasi aktif.
- false → Autentikasi tidak aktif.
Contoh penggunaan:
if (server.isAuthenticationEnabled()) {
Serial.println("Authentication is active");
}
else {
Serial.println("All routes are public");
}
Method ini sering digunakan untuk proses debugging maupun pengaturan sistem secara dinamis.
11. Method send401()
Method send401() digunakan untuk mengirimkan respons HTTP 401 Unauthorized kepada browser apabila proses autentikasi gagal.
void send401(WiFiClient& client)
Secara normal, method ini akan dipanggil secara otomatis oleh library apabila pengguna memasukkan username atau password yang salah. Namun, Anda juga dapat memanggilnya sendiri apabila membuat mekanisme autentikasi khusus.
Contoh:
server.send401(client);
Mengirim HTTP Response Secara Manual
Meskipun sendResponse() sudah cukup untuk sebagian besar aplikasi, terkadang Anda membutuhkan kontrol yang lebih lengkap terhadap HTTP Header, misalnya untuk menambahkan CORS, mengubah kode status HTTP, atau mengirim header khusus. Pada kondisi tersebut, respons dapat dibuat secara manual menggunakan objek WiFiClient.
Contoh:
void sendCustomResponse(WiFiClient& client) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: application/json");
client.println("Access-Control-Allow-Origin: *");
client.println("Connection: close");
client.println();
client.print("{\"custom\":\"response\"}");
}
Pendekatan ini memberikan fleksibilitas yang lebih besar dibandingkan menggunakan sendResponse().
Mengakses Parameter Query pada URL
Saat browser mengirim permintaan seperti berikut:
/temperature?unit=F
atau
/led?state=on&brightness=50
bagian setelah tanda ? disebut Query Parameter. Parameter ini digunakan untuk mengirim nilai tambahan tanpa harus membuat URL yang berbeda.
Struktur QueryParams
Library menyediakan struktur QueryParams yang secara otomatis menyimpan seluruh parameter dari URL.
struct QueryParams {
int count;
struct {
const char* key;
const char* value;
} params[MAX_PARAMS];
};
Keterangan:
- count → Jumlah parameter yang diterima.
- key → Nama parameter.
- value → Nilai parameter.
Mengakses Query Parameter Secara Manual
Untuk mengambil nilai parameter tertentu, Anda dapat melakukan perulangan pada seluruh parameter yang diterima. Contohnya sebagai berikut:
void handleWithParams(
WiFiClient& client,
const String& method,
const String& request,
const QueryParams& params,
const String& jsonData)
{
...
}
Pada contoh tersebut, program akan mencari parameter unit. Jika parameter tidak ditemukan, maka nilai bawaan (default) yang digunakan adalah "C". Sebagai contoh:
/temperature?unit=F
akan menghasilkan nilai F, sedangkan apabila parameter tidak dikirim, program tetap menggunakan nilai C.
Membuat Helper Function untuk Query Parameter
Apabila aplikasi menggunakan banyak parameter, melakukan pencarian satu per satu tentu menjadi kurang praktis. Jadi, Anda dapat membuat fungsi pembantu (helper function) agar pengambilan parameter menjadi lebih sederhana. Contoh fungsi:
String getParam(...)
bool hasParam(...)
Dengan fungsi tersebut, pengambilan parameter menjadi jauh lebih ringkas. Contoh penggunaannya:
String state = getParam(params, "state", "off");
int brightness =
getParam(params, "brightness", "100").toInt();
Apabila browser membuka URL berikut:
/led?state=on&brightness=50
maka state bernilai on dan brightness bernilai 50. Teknik ini sangat membantu ketika membuat halaman konfigurasi maupun REST API yang memiliki banyak parameter.
Class WebSocketServer
Selain web server HTTP, library ini juga menyediakan class WebSocketServer untuk membangun komunikasi real-time antara ESP32 dan browser. Contoh pembuatan objek:
WebSocketServer wsServer(81);
Pada contoh di atas, server WebSocket dijalankan pada port 81. Class ini sebenarnya merupakan alias dari net::WebSocketServer, namun telah disederhanakan sehingga lebih mudah digunakan, terutama bagi pemula.
Class WebSocket
Setiap koneksi WebSocket akan direpresentasikan oleh objek WebSocket.
Contohnya:
WebSocket ws;
Objek ini digunakan untuk mengirim maupun menerima data antara ESP32 dan browser secara langsung.
Method Penting pada WebSocket
1. begin()
Method begin() digunakan untuk menjalankan server WebSocket.
2. void begin()
Biasanya method ini dipanggil pada fungsi setup() setelah koneksi WiFi berhasil dilakukan.
3. loop()
Method loop() bertugas memproses seluruh aktivitas WebSocket, seperti koneksi baru, pengiriman data, maupun penerimaan data.
void loop()
Method ini harus dipanggil secara terus-menerus di dalam fungsi loop(), sama seperti handleClient() pada web server HTTP. Jika method ini tidak dijalankan secara berkala, komunikasi WebSocket tidak akan berjalan dengan baik.
4. onConnection()
Method onConnection() digunakan untuk mendeteksi ketika ada browser atau perangkat lain yang berhasil terhubung ke server WebSocket.
Contoh:
void onConnection([](WebSocket &ws) {
// Kode yang dijalankan saat ada koneksi baru
});
Melalui callback ini, Anda dapat mengirim pesan selamat datang, melakukan autentikasi, mencatat aktivitas pengguna, maupun menyiapkan proses komunikasi selanjutnya.
Dengan kombinasi Web Server dan WebSocket, ESP32 mampu membangun aplikasi web yang bersifat interaktif dan real-time, sehingga sangat cocok digunakan pada berbagai proyek Internet of Things (IoT) seperti monitoring sensor, sistem kendali perangkat, dashboard data, maupun otomasi rumah pintar.
Method onMessage()
Method onMessage() digunakan untuk menangani setiap pesan (message) yang diterima oleh server WebSocket dari browser atau perangkat klien. Sintaksnya sebagai berikut:
void onMessage([](
WebSocket &ws,
const WebSocket::DataType dataType,
const char *message,
uint16_t length) {
// Menangani pesan yang diterima
});
Setiap kali browser mengirim data melalui WebSocket, fungsi callback ini akan dipanggil secara otomatis.
a. Parameter onMessage()
- ws → Objek WebSocket yang mewakili koneksi aktif.
- dataType → Jenis data yang diterima, misalnya teks (TEXT) atau data biner (BINARY).
- message → Isi pesan yang dikirim oleh klien.
- length → Panjang data yang diterima dalam satuan byte.
Method ini biasanya digunakan untuk mengontrol LED melalui browser, mengirim perintah ke ESP32, menerima data konfigurasi, dan membuat komunikasi dua arah secara real-time.
Method onClose()
Method onClose() digunakan untuk mendeteksi ketika koneksi WebSocket ditutup, baik oleh browser maupun oleh ESP32.
void onClose([](
WebSocket &ws,
const WebSocket::CloseCode code,
const char *reason,
uint16_t length) {
// Menangani penutupan koneksi
});
Callback ini dapat dimanfaatkan untuk mencatat aktivitas pengguna (logging), membersihkan variabel yang sudah tidak digunakan, menginformasikan bahwa klien telah terputus, dan meenyiapkan proses koneksi ulang (reconnect).
Method send()
Method send() digunakan untuk mengirim data dari ESP32 menuju browser melalui koneksi WebSocket. Library menyediakan dua bentuk pemanggilan.
void send(const String &message)
atau
void send(const char *message, size_t length)
Contoh penggunaan:
ws.send("Hello Browser");
atau
String json = "{\"status\":\"connected\"}";
ws.send(json);
Berbeda dengan HTTP biasa, data yang dikirim menggunakan WebSocket akan langsung diterima browser tanpa perlu melakukan refresh halaman.
Method close()
Method close() digunakan untuk menutup koneksi WebSocket secara manual. Method ini biasanya dipanggil apabila aplikasi ingin menghentikan komunikasi dengan klien tertentu.
ws.close();
Method Tambahan pada WebSocket
Selain method utama, library juga menyediakan beberapa method tambahan yang sangat berguna dalam pengembangan aplikasi IoT.
1. broadcastTXT()
Method broadcastTXT() digunakan untuk mengirim pesan teks ke seluruh klien WebSocket yang sedang terhubung.
void broadcastTXT(const char* payload)
void broadcastTXT(const String& payload)
Contoh:
wsServer.broadcastTXT("ESP32 Restarted");
Apabila terdapat lima browser yang sedang terhubung, maka kelima browser tersebut akan menerima pesan yang sama secara bersamaan. Method ini sangat cocok digunakan untuk monitoring sensor, dashboard IoT, notifikasi secara real-time, dan sinkronisasi data antar browser.
2. broadcastBIN()
Method broadcastBIN() digunakan untuk mengirim data biner kepada seluruh klien.
void broadcastBIN(const uint8_t* payload, size_t length)
Method ini umumnya digunakan apabila data yang dikirim bukan berupa teks, misalnya:
- Data gambar.
- Buffer audio.
- Paket data sensor dalam format biner.
3. connectedClients()
Method ini digunakan untuk mengetahui jumlah browser atau perangkat yang saat ini masih terhubung ke server WebSocket.
size_t connectedClients()
Contoh:
Serial.println(wsServer.connectedClients());
Method ini sangat berguna apabila aplikasi hanya ingin mengirim data ketika terdapat klien yang aktif.
4. isListening()
Method isListening() digunakan untuk memeriksa apakah server WebSocket sedang berjalan dan siap menerima koneksi baru.
bool isListening()
Method akan mengembalikan:
- true → Server aktif dan siap menerima koneksi.
- false → Server belum berjalan atau sudah dihentikan.
Jenis Event pada WebSocket
Library mendukung beberapa jenis event yang dapat digunakan untuk mengetahui tipe data maupun alasan koneksi ditutup.
1. Enum DataType
Enum DataType menunjukkan jenis data yang diterima melalui WebSocket.
Beberapa nilai yang tersedia antara lain:
- WebSocket::DataType::TEXT → Pesan berupa teks.
- WebSocket::DataType::BINARY → Pesan berupa data biner.
Dengan mengetahui tipe data, program dapat menentukan cara pemrosesan yang sesuai.
2. Enum CloseCode
Selain tipe data, library juga menyediakan CloseCode, yaitu kode standar yang menjelaskan alasan suatu koneksi WebSocket ditutup. Informasi ini sangat berguna ketika melakukan proses debugging maupun analisis komunikasi jaringan.
Implementasi WebSocket Tingkat Lanjut
Setelah memahami method dasar WebSocket, langkah berikutnya adalah menggabungkan seluruh komponen tersebut menjadi aplikasi yang lengkap.
a. Mengatur Event Handler
Pada fungsi setup(), biasanya dilakukan beberapa langk seperti menghubungkan ESP32 ke jaringan WiFi, menjalankan HTTP Server, menjalankan WebSocket Server, dan endaftarkan seluruh callback WebSocket. Contoh implementasinya adalah sebagai berikut.
void setup() {
...
WiFi.begin(ssid, password);
server.begin();
wsServer.begin();
wsServer.onConnection(...);
wsServer.onMessage(...);
wsServer.onClose(...);
}
Dengan pendekatan ini, seluruh proses komunikasi akan ditangani secara otomatis oleh callback yang telah didaftarkan.
Memproses Pesan WebSocket
Setelah browser berhasil terhubung, setiap pesan yang dikirim akan diteruskan ke fungsi pemrosesan.
Contohnya:
handleWebSocketMessage(ws, message, length);
Pada contoh program yang diberikan, ESP32 akan melakukan beberapa langkah berikut:
1. Membaca pesan yang diterima.
2. Memeriksa apakah pesan berisi perintah mengendalikan LED.
3. Menyalakan atau mematikan LED sesuai isi pesan.
4. Mengirimkan status LED kembali ke browser.
5. Mengirim pesan balasan (Echo) sebagai konfirmasi.
Model komunikasi seperti ini banyak digunakan pada aplikasi Smart Home, Industrial IoT, maupun dashboard monitoring.
Mengirim Data Sensor Secara Real-Time
Salah satu keunggulan WebSocket adalah kemampuannya mengirim data secara otomatis tanpa harus menunggu browser meminta data. Pada contoh program, setiap 5 detik ESP32 akan membaca nilai sensor, membuat data dalam format JSON, dan engirimkan data tersebut ke seluruh browser yang sedang terhubung menggunakan broadcastTXT(). Skema kerja tersebut dapat digambarkan sebagai berikut: Sensor → ESP32 → WebSocket → Browser. Dengan cara ini, tampilan dashboard akan selalu diperbarui secara otomatis tanpa perlu menekan tombol Refresh.
Metode HTTP yang Didukung
Selain WebSocket, library ini juga mendukung berbagai metode HTTP standar.
Beberapa metode yang tersedia meliputi:
- HTTP_GET → Mengambil data dari server.
- HTTP_POST → Mengirim data baru ke server.
- HTTP_PUT → Memperbarui data yang sudah ada.
- HTTP_DELETE → Menghapus data.
- HTTP_PATCH → Memperbarui sebagian data.
- HTTP_HEAD → Mengambil informasi header tanpa isi respons.
- HTTP_OPTIONS → Menampilkan metode HTTP yang didukung oleh server.
Dengan dukungan tersebut, ESP32 dapat digunakan untuk membangun REST API yang lengkap.
Integrasi WebSocket dengan JavaScript
Agar browser dapat berkomunikasi dengan ESP32, JavaScript menyediakan objek WebSocket yang bekerja langsung pada halaman web.
a. Membuat Koneksi WebSocket
Langkah pertama adalah membuat koneksi menuju alamat IP ESP32.
const ws = new WebSocket('ws://your-esp32-ip:81');
Apabila koneksi berhasil dibuat, browser dapat langsung mengirim maupun menerima data secara real-time.
b. Menerima Data dari ESP32
JavaScript menyediakan event onmessage untuk menerima data yang dikirim ESP32. Pada contoh program, data yang diterima akan ditampilkan pada Console browser, dicoba diubah menjadi objek JSON menggunakan JSON.parse(), dan diproses lebih lanjut apabila formatnya valid. Jika data bukan JSON, maka data tetap dapat diperlakukan sebagai teks biasa.
c. Mengirim Perintah ke ESP32
Selain menerima data, browser juga dapat mengirimkan perintah.
Sebagai contoh:
- Menyalakan LED.
- Mematikan LED.
- Meminta data sensor terbaru.
- Mengubah konfigurasi perangkat.
Perintah tersebut dikirim dalam format JSON sehingga lebih mudah diproses oleh ESP32.
Menangani Berbagai Jenis Pesan
Pada sisi JavaScript, fungsi handleEsp32Message() digunakan untuk menentukan tindakan berdasarkan jenis pesan yang diterima.
Misalnya:
- sensor → Memperbarui tampilan nilai sensor.
- led_status → Menampilkan status LED.
- welcome → Menampilkan pesan sambutan ketika koneksi berhasil.
Pendekatan ini membuat struktur program menjadi lebih rapi dan mudah dikembangkan.
Contoh Implementasi WebSocket
1. Simple Echo Server
Contoh paling sederhana dari WebSocket adalah Echo Server. Pada contoh ini, setiap pesan yang diterima akan langsung dikirim kembali kepada pengirim. Echo Server sangat cocok digunakan untuk menguji apakah komunikasi WebSocket telah berjalan dengan benar.
2. Memproses Perintah Berbasis JSON
Pada implementasi yang lebih kompleks, ESP32 dapat membaca isi pesan JSON untuk menentukan tindakan tertentu. Sebagai contoh, menyalakan LED, mematikan LED, membaca sensor suhu, dan mengirim data sensor ke browser. Pendekatan ini merupakan dasar pembuatan aplikasi IoT modern yang menggunakan komunikasi dua arah.
3. Heartbeat Implementation
Dalam aplikasi yang berjalan dalam waktu lama, sering kali diperlukan mekanisme Heartbeat, yaitu pengiriman pesan secara berkala untuk memastikan koneksi masih aktif. Pada contoh program, setiap 30 detik ESP32 akan mengirimkan paket JSON berisi informasi waktu (timestamp) kepada seluruh browser yang sedang terhubung menggunakan broadcastTXT(). Dengan adanya Heartbeat, browser dapat segera mengetahui apabila koneksi terputus sehingga dapat melakukan proses reconnect secara otomatis. Mekanisme ini sangat penting pada aplikasi monitoring real-time, dashboard industri, maupun Smart Home, karena membantu menjaga komunikasi tetap stabil meskipun perangkat telah berjalan dalam waktu yang lama.
Pemecahan Masalah (Troubleshooting) WebSocket
Saat mengembangkan aplikasi berbasis ESP32 Web Server dan WebSocket, terkadang muncul berbagai kendala yang menyebabkan komunikasi tidak berjalan sebagaimana mestinya. Berikut beberapa masalah yang paling sering ditemui beserta solusi yang dapat dicoba.
1. Koneksi WebSocket Gagal
Apabila browser tidak dapat terhubung ke server WebSocket, lakukan beberapa pemeriksaan berikut:
- Pastikan port WebSocket yang digunakan benar. Secara bawaan (default), library menggunakan port 81.
- Periksa kembali alamat IP ESP32 dan pastikan perangkat masih terhubung ke jaringan WiFi.
- Coba akses alamat IP ESP32 melalui browser untuk memastikan perangkat masih dapat dijangkau.
- Gunakan Developer Tools pada browser (tab Console atau Network) untuk melihat apakah terdapat pesan kesalahan saat proses koneksi berlangsung.
2. Pesan WebSocket Tidak Diterima
Jika koneksi berhasil dibuat tetapi data tidak pernah diterima, beberapa hal berikut perlu diperiksa:
- Amati Serial Monitor untuk melihat apakah callback onMessage() dipanggil.
- Pastikan format JSON yang dikirim dari browser sudah benar.
- Lakukan pengujian menggunakan pesan teks sederhana terlebih dahulu sebelum mengirim objek JSON yang lebih kompleks.
- Pastikan ukuran pesan tidak melebihi kapasitas buffer yang disediakan library.
Dengan melakukan pengujian secara bertahap, penyebab kesalahan biasanya akan lebih mudah ditemukan.
3. Penggunaan Memori Terlalu Tinggi
Aplikasi WebSocket yang melayani banyak klien dapat menghabiskan memori ESP32 lebih cepat dibandingkan aplikasi HTTP biasa. Untuk mengurangi penggunaan memori, beberapa langkah berikut dapat diterapkan:
- Batasi jumlah klien WebSocket yang dapat terhubung secara bersamaan.
- Bersihkan buffer yang sudah tidak digunakan.
- Hindari proses penggabungan (String concatenation) yang terlalu sering karena dapat menyebabkan fragmentasi memori.
- Pantau jumlah Free Heap Memory selama program berjalan.
Pemeriksaan penggunaan memori secara berkala sangat membantu untuk menjaga kestabilan aplikasi dalam jangka panjang.
Membuat Informasi Debug WebSocket
Selama proses pengembangan, sering kali diperlukan informasi mengenai kondisi server secara real-time. Contoh fungsi berikut digunakan untuk menampilkan informasi penting melalui Serial Monitor.
void debugWebSocket() {
...
}
Fungsi tersebut biasanya menampilkan informasi seperti:
- Jumlah klien WebSocket yang sedang terhubung.
- Status server WebSocket (aktif atau tidak).
- Sisa memori (Free Heap).
- Lama waktu ESP32 aktif (Uptime).
Informasi ini sangat berguna ketika melakukan proses debugging maupun analisis performa aplikasi.
Memantau Performa WebSocket
Selain memantau memori, Anda juga dapat mengukur performa komunikasi WebSocket. Sebagai contoh, fungsi monitorPerformance() menghitung jumlah pesan yang diproses setiap 10 detik, kemudian menampilkannya melalui Serial Monitor. Data yang biasanya dipantau seperti jumlah pesan yang diterima, jumlah klien aktif, dan frekuensi komunikasi. Dengan informasi tersebut, Anda dapat mengetahui apakah server masih mampu menangani beban komunikasi yang diberikan.
Menggunakan Template HTML
Library ini mendukung penggunaan Template HTML, yaitu halaman web yang memiliki placeholder yang nantinya akan diganti dengan data aktual dari ESP32.
Contohnya sebagai berikut.
String response = HTML_TEMPLATE;
response.replace("%TEMPERATURE%", String(temperature));
response.replace("%LED_STATUS%", ledStatus ? "ON" : "OFF");
Pada saat halaman dikirim ke browser, placeholder tersebut akan diganti menjadi nilai sebenarnya.
Sebagai contoh:
- %TEMPERATURE% = Nilai suhu terbaru
- %LED_STATUS% = Status LED (ON/OFF)
- %QUERY_PARAMS% = Nilai parameter yang diterima dari URL
Teknik ini sangat berguna untuk membuat halaman web yang bersifat dinamis tanpa harus menggunakan bahasa pemrograman sisi server seperti PHP.
Fitur Web Server Tingkat Lanjut
Selain menyediakan fungsi dasar, library juga memiliki beberapa fitur lanjutan yang sering digunakan dalam pengembangan aplikasi REST API maupun IoT Dashboard.
a. Dukungan CORS (Cross-Origin Resource Sharing)
Secara bawaan, browser akan membatasi permintaan data dari domain yang berbeda. Untuk mengatasi hal tersebut, server dapat mengirimkan Header CORS, sehingga aplikasi web yang berada pada domain lain tetap dapat mengakses API ESP32 Contohnya adalah dengan menambahkan header berikut:
Access-Control-Allow-Origin: *
Selain itu, server juga dapat menentukan metode HTTP yang diizinkan, seperti:
- GET
- POST
- PUT
- DELETE
- OPTIONS
Fitur ini sangat penting apabila ESP32 akan diakses oleh aplikasi web eksternal.
Helper untuk Respons JSON
Apabila aplikasi sering mengirim data dalam format JSON, sebaiknya dibuat fungsi pembantu (helper function) agar kode menjadi lebih ringkas. Contohnya adalah fungsi sendJsonResponse() dan sendError(). Dengan fungsi tersebut, Anda cukup memanggil satu baris kode untuk mengirim respons JSON maupun pesan kesalahan tanpa harus menuliskan struktur respons berulang kali.
Pendekatan ini membuat kode menjadi lebih mudah dibaca dan dipelihara.
Melakukan Validasi Data Permintaan (Request Validation)
Sebelum memproses data yang diterima dari browser, sebaiknya lakukan validasi terlebih dahulu.
Sebagai contoh, apabila aplikasi hanya menerima aksi on, off, atau toggle, maka nilai selain ketiga pilihan tersebut sebaiknya langsung ditolak. Demikian pula ketika aplikasi menerima data JSON, pastikan seluruh field yang wajib telah tersedia.
Misalnya:
- action
- value
- enabled
Validasi seperti ini membantu mencegah kesalahan logika maupun data yang tidak valid.
Pemrosesan JSON Menggunakan ArduinoJson
Untuk aplikasi yang lebih kompleks, library ArduinoJson sangat disarankan karena mampu memproses data JSON dengan lebih aman dan efisien. Prosesnya secara umum terdiri dari beberapa tahap, seperti:
1. Membaca isi permintaan (Request Body).
2. Mengubah JSON menjadi objek menggunakan deserializeJson().
3. Mengambil nilai setiap field.
4. Memproses data.
5. Membuat objek JSON baru sebagai respons.
6. Mengirim hasilnya kembali ke browser.
Pendekatan ini jauh lebih rapi dibandingkan mencari isi JSON menggunakan fungsi pencarian string.
Penanganan Error 404
Secara bawaan, library telah menyediakan halaman 404 Not Found. Namun, Anda dapat menggantinya dengan halaman buatan sendiri. Misalnya, ketika pengguna membuka alamat yang tidak tersedia, server dapat menampilkan halaman HTML yang berisi informasi bahwa URL tersebut tidak ditemukan. Cara ini memberikan pengalaman penggunaan yang lebih baik dibandingkan hanya menampilkan pesan kesalahan standar.
Praktik Terbaik dalam Mengembangkan Web Server ESP32
Agar aplikasi tetap stabil dan mudah dikembangkan, beberapa praktik berikut sangat disarankan.
1. Optimalkan Penggunaan Memori
Gunakan makro F() untuk menyimpan string konstan di memori Flash, sehingga penggunaan RAM menjadi lebih hemat.
2. Hindari Kode yang Bersifat Blocking
Usahakan fungsi handler berjalan secepat mungkin. Hindari penggunaan delay() yang terlalu lama karena dapat membuat web server berhenti merespons permintaan dari klien.
3. Validasi Seluruh Input
Jangan langsung memproses data yang diterima dari pengguna. Selalu lakukan pemeriksaan terhadap parameter URL maupun data JSON untuk menghindari kesalahan maupun potensi masalah keamanan.
4. Gunakan HTTP Status Code yang Tepat
Pilih kode status HTTP sesuai kondisi yang terjadi.
Sebagai contoh:
- 200 OK → Permintaan berhasil.
- 400 Bad Request → Format permintaan salah.
- 401 Unauthorized → Autentikasi gagal.
- 404 Not Found → Halaman tidak ditemukan.
- 500 Internal Server Error → Terjadi kesalahan pada server.
Dengan penggunaan status HTTP yang tepat, proses debugging maupun integrasi API menjadi lebih mudah.
5. Kelola Koneksi WebSocket dengan Benar
Pastikan aplikasi mampu menangani kondisi berikut:
- Klien baru terhubung.
- Klien terputus.
- Koneksi gagal.
- Proses reconnect secara otomatis.
Pengelolaan koneksi yang baik akan meningkatkan keandalan aplikasi, terutama untuk sistem monitoring yang berjalan selama 24 jam.
Melakukan Debug Menggunakan Serial Monitor
Cara termudah untuk mengetahui kondisi aplikasi adalah dengan menampilkan informasi melalui Serial Monitor. Sebagai contoh, setiap data yang diterima dari browser dapat dicetak menggunakan Serial.println() sehingga proses komunikasi lebih mudah dianalisis. Teknik ini sangat membantu ketika terjadi kesalahan pada komunikasi HTTP maupun WebSocket.
Kompatibilitas Library
Library DIYables ESP32 WebServer dirancang khusus untuk platform ESP32. Agar seluruh fitur dapat digunakan dengan baik, beberapa kebutuhan minimum yang harus dipenuhi antara lain:
- Menggunakan board ESP32.
- Menggunakan library WiFi bawaan Arduino IDE.
- Memiliki memori Flash minimal 32 KB.
- Memiliki RAM minimal 2 KB untuk menjalankan fungsi dasar library.
Batasan Web Server
Meskipun cukup ringan, library tetap memiliki beberapa keterbatasan yang perlu diperhatikan. Beberapa batasan pada fitur HTTP Server antara lain:
- Maksimal 4 koneksi HTTP secara bersamaan (bergantung pada kemampuan perangkat).
- Panjang URL maksimum sekitar 256 karakter.
- Placeholder pada template HTML tidak mendukung penggantian secara bertingkat (nested placeholder).
Batasan WebSocket
Untuk fitur WebSocket, terdapat beberapa batasan sebagai berikut:
- Ukuran pesan maksimum sekitar 1 KB untuk setiap pesan.
- Jumlah klien WebSocket yang dapat terhubung secara bersamaan berkisar 4 hingga 6 klien, tergantung sisa memori yang tersedia.
- Fragmentasi pesan ditangani secara otomatis oleh library, namun dapat memengaruhi performa apabila ukuran data terlalu besar.
- Ukuran data biner dibatasi oleh kapasitas RAM yang masih tersedia.
- Waktu tunggu (connection timeout) secara bawaan sekitar 60 detik, namun dapat diubah sesuai kebutuhan aplikasi.
Kebutuhan Memori
Sebelum mengembangkan aplikasi yang lebih besar, penting untuk memahami kebutuhan memori library ini. Secara umum, kebutuhan minimum yang disarankan meliputi:
- Flash Memory minimal 32 KB.
- RAM minimal 2 KB untuk fungsi dasar.
- Setiap koneksi WebSocket membutuhkan tambahan memori sekitar 200–500 byte.
- Buffer pesan aktif memerlukan ruang sekitar 1 KB untuk setiap koneksi.
Semakin banyak klien yang terhubung dan semakin besar ukuran data yang dikirim, maka kebutuhan RAM juga akan meningkat. Oleh karena itu, lakukan pengelolaan memori dengan baik agar aplikasi tetap stabil, responsif, dan mampu berjalan dalam waktu yang lama tanpa mengalami gangguan.
0 Komentar