WebServerWithWebSocket Example merupakan contoh proyek yang menunjukkan cara membuat Web Server multi-halaman pada ESP32 yang dilengkapi dengan komunikasi WebSocket secara real-time. Dengan memanfaatkan WebSocket, browser dapat bertukar data dengan ESP32 secara dua arah (bidirectional communication) tanpa perlu melakukan refresh halaman secara terus-menerus. Berbeda dengan komunikasi HTTP biasa yang mengharuskan browser mengirim permintaan (request) setiap kali membutuhkan data terbaru, WebSocket mempertahankan koneksi tetap terbuka sehingga baik browser maupun ESP32 dapat saling mengirim data kapan saja. Metode ini membuat komunikasi menjadi lebih cepat, efisien, dan sangat cocok digunakan untuk aplikasi Internet of Things (IoT) yang memerlukan pembaruan data secara langsung.
Fitur WebServerWithWebSocket
Contoh program ini memiliki beberapa fitur utama yang dapat digunakan sebagai dasar pengembangan aplikasi IoT berbasis WebSocket.
- Komunikasi WebSocket secara real-time untuk pertukaran data dua arah antara browser dan ESP32.
- Mendukung perintah berbasis teks (text command) seperti ping, halo, waktu, LED ON, dan LED OFF.
- Mengontrol LED bawaan ESP32 langsung melalui halaman web.
- Menyediakan HTTP Server yang berfungsi untuk mengirim halaman web ke browser.
- Memiliki fitur Echo Message sebagai pengujian apakah data berhasil dikirim dan diterima.
- Dilengkapi indikator status koneksi serta mekanisme Auto Reconnect jika koneksi WebSocket terputus.
Baca juga: DIYables ESP32 Web Apps Library Reference - Panduan Lengkap Struktur Library dan API ESP32 Web Apps
Perangkat Keras yang Dibutuhkan
- Modul ESP32 ESP-WROOM-32 Dev Board (38 Pin)
- Kabel USB
Pada contoh ini tidak diperlukan sensor maupun modul tambahan karena pengujian dilakukan menggunakan LED bawaan yang tersedia pada board ESP32.
Menginstal Library Web Server untuk ESP32
Agar contoh program dapat dikompilasi dengan baik, terlebih dahulu instal library yang dibutuhkan melalui Library Manager di Arduino IDE. Langkah-langkah instalasinya sebagai berikut:
1. Hubungkan board ESP32 ke komputer menggunakan kabel USB.
2. Jalankan Arduino IDE.
3. Pilih Board ESP32 yang digunakan beserta Port COM yang sesuai melalui menu Tools.
4. Buka Library Manager dengan memilih ikon Library pada panel sebelah kiri Arduino IDE.
5. Pada kotak pencarian, ketik Web Server for ESP32, kemudian cari library mWebSockets by DIYables.
6. Klik tombol Install, kemudian tunggu hingga proses instalasi selesai.
Membuka Contoh Program WebServerWithWebSocket
Setelah library berhasil diinstal, buka contoh program yang telah disediakan oleh library tersebut. Masuk ke menu File → Examples → DIYables ESP32 WebServer → WebServerWithWebSocket. Contoh program ini sudah berisi konfigurasi HTTP Server, WebSocket Server, serta halaman web yang nantinya akan dijalankan langsung oleh ESP32.
Struktur Program
Project WebServerWithWebSocket terdiri dari dua file utama yang memiliki fungsi berbeda, yaitu:
1. File websocket_html.h
File ini berisi seluruh kode HTML, CSS, dan JavaScript yang digunakan untuk membangun antarmuka web. Melalui halaman web tersebut, pengguna dapat melakukan komunikasi secara langsung dengan ESP32 menggunakan protokol WebSocket. Selain itu, tersedia beberapa tombol untuk mengirim perintah, kolom log untuk menampilkan aktivitas komunikasi, serta indikator status koneksi yang diperbarui secara real-time.
2. File WebServerWithWebSocket.ino
File ini merupakan program utama yang dijalankan oleh ESP32. Di dalamnya terdapat konfigurasi jaringan WiFi, pembuatan HTTP Server dan WebSocket Server, penanganan pesan dari browser, serta logika untuk mengendalikan perangkat keras seperti LED bawaan berdasarkan perintah yang diterima melalui WebSocket.
Koneksi Rangkaian
Contoh program ini tidak memerlukan rangkaian tambahan. Seluruh pengujian dilakukan menggunakan LED bawaan ESP32 yang terhubung ke GPIO 13, sehingga Anda cukup menghubungkan board ESP32 ke komputer melalui kabel USB.
Cara Kerja Komunikasi WebSocket
Pada proyek ini, ESP32 menjalankan dua layanan sekaligus, yaitu HTTP Server dan WebSocket Server. HTTP Server bertugas mengirim halaman web ke browser, sedangkan WebSocket Server digunakan untuk mempertahankan koneksi dua arah sehingga browser dan ESP32 dapat saling bertukar data secara real-time.
1. Informasi Server
Konfigurasi komunikasi yang digunakan adalah sebagai berikut:
- HTTP Server Port : 80
- WebSocket Server Port : 81
- Protocol : WebSocket (RFC 6455)
Ketika browser membuka alamat IP ESP32, halaman web akan dimuat melalui HTTP Server. Selanjutnya halaman tersebut akan membuat koneksi ke WebSocket Server pada port 81 untuk memulai komunikasi real-time.
2. Jenis Perintah yang Didukung
Komunikasi antara browser dan ESP32 menggunakan perintah sederhana berbentuk string. Berikut beberapa perintah yang tersedia.
Fitur Echo sangat berguna untuk memastikan bahwa komunikasi WebSocket berjalan dengan baik karena setiap pesan yang dikirim akan dikembalikan oleh ESP32.
Konfigurasi Jaringan WiFi
Sebelum program diunggah ke ESP32, ubah terlebih dahulu informasi jaringan WiFi pada file WebServerWithWebSocket.ino. Masukkan nama jaringan (SSID) dan password WiFi yang akan digunakan oleh ESP32.
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
Mengunggah Program ke ESP32
Setelah konfigurasi WiFi selesai, lakukan proses upload program ke board ESP32. Langkah-langkahnya sebagai berikut:
- Hubungkan board ESP32 ke komputer menggunakan kabel USB.
- Pilih Board dan Port yang sesuai pada Arduino IDE.
- Klik tombol Upload untuk mengunggah file WebServerWithWebSocket.ino.
- Setelah proses upload selesai, buka Serial Monitor dengan baud rate 9600.
- Tunggu hingga ESP32 berhasil terhubung ke jaringan WiFi.
- Perhatikan informasi yang ditampilkan pada Serial Monitor, terutama alamat IP ESP32, HTTP Server, dan WebSocket Server.
- Jika alamat IP belum muncul, tekan tombol Reset pada board ESP32, kemudian tunggu beberapa saat hingga proses inisialisasi selesai.
Selanjutnya buka browser, kemudian akses alamat IP ESP32, misalnya: http://10.167.22.32/. Jika seluruh proses berhasil, halaman web akan tampil seperti gambar berikut:
Menguji Komunikasi WebSocket
Setelah halaman web berhasil dimuat, langkah berikutnya adalah menguji komunikasi antara browser dan ESP32. Ikuti langkah-langkah berikut:
1. Klik tombol Connect untuk membuat koneksi WebSocket.
2. Tunggu hingga indikator status berubah menjadi Connected.
3. Tekan setiap tombol perintah yang tersedia, seperti Ping, Halo, Waktu, LED ON, dan LED OFF.
4. Perhatikan respons yang ditampilkan pada area log komunikasi.
5. Pastikan setiap perintah memperoleh balasan dari ESP32 secara real-time.
Jika seluruh proses berjalan dengan baik, hasilnya akan terlihat seperti contoh berikut.
Fitur Antarmuka Web
Halaman web yang terdapat pada file websocket_html.h menyediakan beberapa fitur yang memudahkan proses pengujian komunikasi WebSocket. Fitur-fitur tersebut antara lain:
- Tombol Connect dan Disconnect untuk membuka atau menutup koneksi WebSocket.
- Quick Command Button untuk mengirim perintah seperti Ping, Halo, Waktu, LED ON, dan LED OFF.
- Kolom Input untuk mengirim pesan atau perintah sesuai kebutuhan pengguna.
- Communication Log yang menampilkan seluruh aktivitas komunikasi secara real-time.
- Connection Status Indicator yang menunjukkan apakah koneksi WebSocket sedang aktif atau terputus.
Dengan antarmuka ini, pengguna dapat menguji komunikasi dua arah antara browser dan ESP32 tanpa perlu menggunakan aplikasi tambahan.
Penjelasan Kode Program
Agar lebih mudah memahami cara kerja program, berikut beberapa bagian penting yang akan dibahas.
1. Pengaturan WebSocket Server
Bagian ini berisi konfigurasi HTTP Server, WebSocket Server, serta proses inisialisasi layanan yang dijalankan oleh ESP32.
#include <DIYables_ESP32_WebServer.h>
#include "websocket_html.h"
// LED configuration
#define LED_PIN 2 // ESP32 built-in LED pin
// Server configuration
WiFiServer httpServer(80);
constexpr uint16_t wsPort = 81;
WebSocketServer wss{wsPort};
void setup() {
Serial.begin(9600);
delay(1000);
// Initialize built-in LED
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LOW);
// Connect to WiFi manually
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Start HTTP server
httpServer.begin();
// Configure WebSocket server with lambda handlers
wss.onConnection([](WebSocket &ws) {
Serial.println("New WebSocket connection");
// Set up message handler
ws.onMessage([](WebSocket &ws, const WebSocket::DataType dataType, const char *message, uint16_t length) {
handleWebSocketMessage(ws, message, length);
});
// Send welcome message
const char welcome[] = "Connected to ESP32!";
ws.send(WebSocket::DataType::TEXT, welcome, strlen(welcome));
});
// Start WebSocket server
wss.begin();
}
2. Penanganan Pesan WebSocket
Bagian ini bertugas menerima setiap pesan yang dikirim dari browser, kemudian memproses isi pesan tersebut sebelum mengirimkan respons kembali kepada client.
void handleWebSocketMessage(WebSocket &ws, const char *message, uint16_t length) {
Serial.print("[WebSocket] Received (");
Serial.print(length);
Serial.print(" bytes): ");
Serial.println(message);
String msgStr = String(message);
String response = "";
// Command processing with simple string matching
if (msgStr.equalsIgnoreCase("ping")) {
response = "pong";
}
else if (msgStr.equalsIgnoreCase("hello")) {
response = "Hello from ESP32!";
}
else if (msgStr.equalsIgnoreCase("time")) {
response = "Uptime: " + String(millis()/1000) + " seconds";
}
else if (msgStr.equalsIgnoreCase("led on")) {
digitalWrite(LED_PIN, HIGH);
response = "LED ON";
}
else if (msgStr.equalsIgnoreCase("led off")) {
digitalWrite(LED_PIN, LOW);
response = "LED OFF";
}
else {
response = "Echo: " + msgStr;
}
// Send response
ws.send(WebSocket::DataType::TEXT, response.c_str(), response.length());
}
3. Main Loop dan Pemrosesan WebSocket
Bagian loop() akan terus dijalankan selama ESP32 aktif. Pada bagian ini server memproses koneksi client, menerima data baru, serta mengirimkan respons secara real-time melalui WebSocket.
void loop() {
// Handle HTTP requests
WiFiClient httpClient = httpServer.available();
if (httpClient) {
handleHTTPClient(httpClient);
}
// Handle WebSocket connections
wss.listen();
delay(10);
}
// HTTP request handler
void handleHTTPClient(WiFiClient client) {
String request = "";
// Read HTTP request
while (client.connected() && client.available()) {
String line = client.readStringUntil('\n');
if (line == "\r") break;
if (request.length() == 0) request = line;
}
// Serve web page or 404
if (request.indexOf("GET / HTTP") >= 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.print(htmlPage);
} else {
client.println("HTTP/1.1 404 Not Found");
client.println("Connection: close");
client.println();
}
client.stop();
}
Penjelasan JavaScript WebSocket Client
Selain kode pada ESP32, contoh program ini juga menggunakan JavaScript yang berjalan di browser untuk mengelola komunikasi WebSocket.
1. Manajemen Koneksi WebSocket
Bagian ini bertugas membuat koneksi ke WebSocket Server, menangani proses koneksi berhasil, koneksi terputus, serta melakukan Auto Reconnect jika koneksi mengalami gangguan.
let websocket;
let isConnected = false;
function initWebSocket() {
const wsUrl = `ws://${window.location.hostname}:81/`;
websocket = new WebSocket(wsUrl);
websocket.onopen = function(event) {
console.log('WebSocket connected');
isConnected = true;
updateConnectionStatus('Connected');
};
websocket.onmessage = function(event) {
handleWebSocketMessage(JSON.parse(event.data));
};
websocket.onclose = function(event) {
console.log('WebSocket disconnected');
isConnected = false;
updateConnectionStatus('Disconnected');
// Auto-reconnect after 3 seconds
setTimeout(initWebSocket, 3000);
};
websocket.onerror = function(error) {
console.error('WebSocket error:', error);
updateConnectionStatus('Error');
};
}
2. Menerima Pesan dari ESP32
Kode ini digunakan untuk menerima seluruh pesan yang dikirim oleh ESP32, kemudian menampilkannya pada area log komunikasi di halaman web secara real-time.
function handleWebSocketMessage(event) {
const message = event.data;
console.log('Received:', message);
// Handle simple string responses (matching actual implementation)
if (message === 'pong') {
console.log('Ping response received');
addMessageToHistory('Received: pong');
} else if (message.startsWith('Hello from ESP32')) {
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Uptime:')) {
updateUptimeDisplay(message);
addMessageToHistory('Received: ' + message);
} else if (message === 'LED ON' || message === 'LED OFF') {
updateLedStatus(message);
addMessageToHistory('Received: ' + message);
} else if (message.startsWith('Echo:')) {
addMessageToHistory('Received: ' + message);
} else {
addMessageToHistory('Received: ' + message);
}
}
3. Mengirim Perintah ke ESP32
Bagian ini berfungsi mengirim perintah dari browser ke ESP32 melalui WebSocket, baik melalui tombol perintah maupun melalui kolom input yang tersedia pada halaman web.
// Simple string-based command sending (matching actual implementation)
function sendCommand(command) {
if (isConnected) {
websocket.send(command);
addMessageToHistory('Sent: ' + command);
} else {
alert('WebSocket not connected!');
}
}
function controlLED(action) {
if (action === 'on') {
sendCommand('led on');
} else if (action === 'off') {
sendCommand('led off');
}
}
function sendPing() {
sendCommand('ping');
}
function sendHello() {
sendCommand('hello');
}
function getUptime() {
sendCommand('time');
}
Fitur Antarmuka HTML
Selain program yang berjalan pada ESP32, contoh proyek ini juga menyediakan halaman web berbasis HTML, CSS, dan JavaScript yang berfungsi sebagai media interaksi antara pengguna dan ESP32 melalui protokol WebSocket. Melalui antarmuka ini, pengguna dapat mengirim perintah, menerima respons dari ESP32 secara langsung, serta memantau status koneksi tanpa perlu melakukan refresh halaman.
1. Antarmuka Pengujian WebSocket
Halaman HTML yang disediakan dirancang untuk mempermudah proses pengujian komunikasi WebSocket antara browser dan ESP32. Beberapa fitur yang tersedia pada halaman tersebut meliputi:
- Pengelolaan koneksi melalui tombol Connect dan Disconnect untuk membuka maupun menutup koneksi WebSocket.
- Quick Command Button yang memungkinkan pengguna mengirim perintah umum seperti ping, halo, waktu, LED ON, dan LED OFF hanya dengan satu klik.
- Kolom Input Teks yang dapat digunakan untuk mengirim perintah atau pesan sesuai kebutuhan.
- Communication Log yang menampilkan seluruh aktivitas komunikasi, baik pesan yang dikirim maupun respons yang diterima dari ESP32 secara real-time.
- Connection Status Indicator yang memberikan informasi mengenai status koneksi WebSocket, apakah sedang terhubung atau terputus.
Dengan adanya antarmuka ini, proses pengujian komunikasi menjadi lebih mudah karena seluruh aktivitas dapat dilakukan langsung melalui browser.
2. Fungsi JavaScript
Selain menampilkan antarmuka pengguna, halaman web ini juga dilengkapi dengan beberapa fungsi JavaScript yang bertanggung jawab mengelola komunikasi antara browser dan ESP32. Fungsi-fungsi tersebut digunakan untuk:
- Membuat koneksi ke WebSocket Server pada ESP32.
- Mengirim perintah dari browser ke ESP32.
- Menerima pesan atau respons dari ESP32 secara real-time.
- Memperbarui status koneksi pada halaman web.
- Menampilkan seluruh aktivitas komunikasi pada area log.
Seluruh fungsi JavaScript tersebut telah disesuaikan dengan format komunikasi yang digunakan oleh WebSocket Server pada ESP32 sehingga proses pertukaran data dapat berlangsung secara cepat dan efisien.
// Send simple string commands to ESP32
function sendQuick(msg) {
if (connected && ws) {
ws.send(msg);
addMsg('You: ' + msg, 'sent');
} else {
addMsg('Not connected!');
}
}
// Handle WebSocket events
ws.onmessage = function(event) {
console.log('WebSocket message received:', event.data);
addMsg('ESP32: ' + event.data, 'received');
};
Catatan Implementasi
Sebelum mengembangkan proyek ini lebih lanjut, ada beberapa hal penting yang perlu dipahami mengenai arsitektur sistem dan batasan implementasinya.
1. Arsitektur Sistem
Implementasi WebServerWithWebSocket menggunakan arsitektur yang relatif sederhana sehingga mudah dipelajari maupun dikembangkan untuk kebutuhan proyek IoT lainnya. Komponen utama yang digunakan meliputi:
- HTTP Server dan WebSocket Server dijalankan secara terpisah menggunakan WiFiServer untuk melayani permintaan halaman web serta WebSocketServer untuk komunikasi real-time.
- Koneksi ke jaringan WiFi dilakukan menggunakan fungsi WiFi.begin() tanpa memerlukan framework tambahan.
- Pertukaran data menggunakan string sehingga komunikasi menjadi lebih sederhana dan tidak memerlukan format JSON.
- Penanganan event WebSocket dilakukan menggunakan lambda function untuk memproses koneksi maupun pesan yang diterima.
- Halaman web dikirim langsung dari file header menggunakan fungsi client.print(), sehingga seluruh file HTML tersimpan di dalam program ESP32.
Arsitektur seperti ini sangat cocok digunakan sebagai media pembelajaran sebelum beralih ke implementasi WebSocket yang lebih kompleks.
2. Batasan Implementasi
Meskipun sudah mampu menjalankan komunikasi WebSocket secara real-time, implementasi ini masih memiliki beberapa keterbatasan. Di antaranya adalah:
- Belum mendukung streaming data sensor secara terus-menerus.
- Belum mendukung pengolahan maupun validasi data dalam format JSON.
- Komunikasi masih difokuskan untuk satu client dan belum dioptimalkan untuk banyak client secara bersamaan.
- Manajemen koneksi masih sederhana, yaitu hanya mendukung proses Connect dan Disconnect.
- Belum menerapkan mekanisme Heartbeat atau Keep Alive untuk menjaga kestabilan koneksi.
- Belum tersedia sistem Message Queue maupun mekanisme keandalan komunikasi lainnya.
Jika proyek akan digunakan pada aplikasi IoT berskala besar, beberapa fitur tersebut sebaiknya ditambahkan agar komunikasi menjadi lebih stabil dan andal.
3. Daftar Perintah yang Didukung
Program ini mengenali beberapa perintah berbasis teks yang dikirim melalui WebSocket.
Daftar perintah ini dapat diperluas sesuai kebutuhan, misalnya untuk membaca sensor, mengendalikan relay, atau mengirimkan data monitoring dari ESP32 ke browser.
Pemecahan Masalah (Troubleshooting)
Selama proses pengujian, terkadang komunikasi WebSocket tidak berjalan sebagaimana mestinya. Berikut beberapa solusi yang dapat dicoba:
1. WebSocket Tidak Dapat Terhubung
Jika browser gagal membuat koneksi ke ESP32, lakukan beberapa pemeriksaan berikut:
- Pastikan WebSocket Server berjalan pada port 81.
- Periksa apakah firewall atau sistem keamanan jaringan tidak memblokir port tersebut.
- Gunakan Developer Tools pada browser untuk melihat apakah terdapat error saat proses koneksi.
- Pastikan alamat IP ESP32 yang dimasukkan pada browser sudah benar.
2. ESP32 Tidak Menerima Pesan
Jika pesan yang dikirim dari browser tidak diterima oleh ESP32, lakukan langkah berikut:
- Buka Serial Monitor untuk memastikan apakah pesan benar-benar diterima oleh program ESP32.
- Periksa kembali penulisan perintah agar sesuai dengan format yang dikenali oleh program.
- Lakukan pengujian menggunakan perintah sederhana seperti ping sebelum mencoba perintah lainnya.
3. LED Tidak Merespons Perintah
Jika LED bawaan tidak berubah sesuai perintah yang dikirimkan, lakukan pemeriksaan berikut:
- Pastikan nilai LED_PIN telah disesuaikan dengan GPIO LED bawaan pada board ESP32 yang digunakan.
- Periksa Serial Monitor untuk memastikan bahwa perintah telah diterima dan diproses oleh ESP32.
- Pastikan perintah yang dikirim menggunakan format yang benar, misalnya LED ON atau LED OFF.
4. Perintah yang Direkomendasikan untuk Pengujian
Untuk memastikan komunikasi WebSocket berjalan dengan baik, gunakan beberapa perintah berikut:
Jika seluruh perintah tersebut memberikan respons yang sesuai, berarti komunikasi antara browser dan ESP32 telah berjalan dengan baik.
Contoh Penerapan pada Proyek IoT
Implementasi WebServerWithWebSocket dapat dijadikan sebagai dasar dalam membangun berbagai aplikasi Internet of Things (IoT) yang membutuhkan komunikasi data secara real-time. Beberapa contoh penerapannya antara lain:
- Mengendalikan perangkat IoT dari browser, seperti LED, relay, motor, atau aktuator lainnya.
- Membangun sistem monitoring real-time yang menampilkan data sensor secara langsung tanpa perlu me-refresh halaman web.
- Mengembangkan sistem komunikasi dua arah antara browser dan ESP32 untuk mengirim perintah maupun menerima status perangkat.
- Mempelajari implementasi WebSocket sebelum mengembangkan aplikasi IoT yang lebih kompleks, seperti dashboard monitoring, smart home, maupun sistem otomasi industri.
Karena komunikasi berlangsung secara real-time, WebSocket menjadi salah satu teknologi yang sangat cocok digunakan pada aplikasi IoT yang membutuhkan respons cepat dan pertukaran data secara terus-menerus antara ESP32 dan browser.
Baca juga: Membuat REST API Server JSON di ESP32 Menggunakan WebServerJson
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 Komentar