ESP32 WebSocket - Cara Membangun Komunikasi Real-Time antara ESP32 dan Web Browser

Pada tutorial ini, Anda akan mempelajari apa itu WebSocket, bagaimana cara kerjanya pada ESP32, serta alasan mengapa protokol ini menjadi pilihan terbaik untuk membangun komunikasi real-time antara ESP32 dan web browser. Sebagai contoh implementasi, kita akan membuat sebuah aplikasi chat sederhana yang memungkinkan browser web dan ESP32 saling bertukar data secara langsung. Konsep yang digunakan pada proyek ini dapat dengan mudah dikembangkan menjadi berbagai aplikasi Internet of Things (IoT), seperti sistem monitoring sensor, dashboard IoT, maupun kontrol perangkat secara real-time. Melalui tutorial ini, Anda akan mempelajari cara:

- Mengirim pesan dari browser web ke ESP32 menggunakan WebSocket. Konsep ini dapat diadaptasi untuk mengendalikan LED, relay, servo, motor, dan berbagai perangkat lainnya.

- Menerima pesan dari ESP32 secara real-time tanpa perlu me-refresh halaman web. Teknik ini sangat berguna untuk monitoring sensor atau menampilkan status perangkat secara langsung.

Perangkat Keras yang Dibutuhkan

- Modul ESP32 ESP-WROOM-32 Dev Module (39 Pin)

- Kabel USB

Apa Itu WebSocket pada ESP32?

WebSocket adalah protokol komunikasi yang memungkinkan ESP32 dan web browser saling bertukar data secara dua arah (full-duplex) melalui satu koneksi TCP yang tetap aktif (persistent connection). Berbeda dengan komunikasi menggunakan HTTP, di mana browser harus mengirimkan permintaan (request) setiap kali membutuhkan data dari server, WebSocket hanya melakukan proses handshake satu kali pada awal koneksi. Setelah koneksi berhasil dibuat, ESP32 maupun browser dapat saling mengirim data kapan saja tanpa harus membuat koneksi baru. Dengan mekanisme tersebut, komunikasi menjadi jauh lebih cepat, efisien, dan memiliki latensi yang sangat rendah. Pada proyek berbasis Internet of Things (IoT), WebSocket sering digunakan ketika perangkat harus memberikan pembaruan data secara terus-menerus atau menerima perintah secara langsung dari pengguna. Sebagai contoh:

- ESP32 mengirimkan data suhu setiap detik ke browser.

- Browser langsung mengirimkan perintah menyalakan LED tanpa me-refresh halaman.

- Dashboard IoT menampilkan perubahan data sensor secara otomatis.

- Sistem smart home menerima dan menjalankan perintah secara instan.

 

Baca juga: ESP32 Web Server dengan Login Username dan Password (HTTP Authentication) 

Cara Kerja WebSocket pada ESP32

Secara sederhana, alur komunikasi WebSocket dapat dijelaskan sebagai berikut:

1. Browser mengakses alamat IP ESP32.

2. ESP32 mengirimkan halaman web (HTML, CSS, dan JavaScript) kepada browser melalui HTTP.

3. Setelah halaman selesai dimuat, JavaScript akan membuat koneksi WebSocket ke ESP32.

4. Koneksi tersebut akan tetap aktif selama browser dan ESP32 masih terhubung.

5. Browser maupun ESP32 dapat saling mengirim data kapan saja tanpa membuat koneksi baru.

Karena koneksi selalu aktif, pertukaran data dapat berlangsung hampir secara instan.

Mengapa WebSocket Dibutuhkan untuk Mengontrol ESP32 Secara Real-Time?

Pada banyak proyek IoT, kecepatan komunikasi merupakan faktor yang sangat penting. Misalnya ketika Anda ingin menyalakan atau mematikan LED, mengendalikan relay, menggerakkan motor servo, mengontrol motor DC, mengubah kecepatan kipas, dan mengirim data sensor secara terus-menerus.  Jika komunikasi masih menggunakan HTTP, browser harus mengirimkan permintaan (request) baru setiap kali terjadi perubahan. Proses ini menyebabkan adanya tambahan waktu untuk membuka koneksi, mengirim permintaan, menerima respons, kemudian menutup koneksi kembali. Akibatnya, kontrol perangkat terasa kurang responsif, terutama ketika data harus dikirim secara terus-menerus. Sebaliknya, WebSocket mempertahankan koneksi yang sudah terbentuk sehingga browser maupun ESP32 dapat langsung bertukar data tanpa proses pembukaan koneksi berulang. Hasilnya, komunikasi menjadi jauh lebih cepat dengan latensi yang sangat rendah.

Keunggulan WebSocket pada ESP32

Dibandingkan komunikasi berbasis HTTP biasa, WebSocket memiliki berbagai keunggulan berikut:

1. Komunikasi Real-Time

Data dapat dikirim dan diterima secara langsung tanpa harus me-refresh halaman web sehingga respons sistem menjadi sangat cepat.

2. Komunikasi Dua Arah (Full-Duplex)

ESP32 dan browser dapat saling mengirim maupun menerima data secara bersamaan. Hal ini berbeda dengan HTTP yang umumnya menggunakan mekanisme request-response.

3. Persistent Connection

Koneksi tetap dipertahankan selama komunikasi berlangsung sehingga tidak perlu membuat koneksi baru setiap kali mengirim data.

4. Penggunaan Bandwidth Lebih Efisien

Karena tidak perlu melakukan proses koneksi berulang, jumlah data yang dikirim melalui jaringan menjadi lebih sedikit sehingga penggunaan bandwidth lebih hemat.

5. Respons Kontrol Lebih Cepat

Perintah dari browser dapat langsung diterima oleh ESP32 hanya dalam hitungan milidetik, sehingga sangat cocok digunakan pada aplikasi kontrol perangkat secara langsung.

Penerapan WebSocket pada Proyek ESP32

WebSocket merupakan salah satu teknologi yang paling banyak digunakan dalam pengembangan aplikasi berbasis ESP32, antara lain:

- Dashboard monitoring sensor secara real-time.

- Sistem Smart Home.

- Kontrol LED melalui browser.

- Kontrol relay.

- Kendali motor servo maupun motor DC.

- Monitoring suhu dan kelembapan.

- Robot berbasis web.

- Sistem otomasi industri skala kecil.

- Aplikasi Internet of Things (IoT).

Manfaat Menggunakan WebSocket pada ESP32

Secara umum, WebSocket memberikan beberapa keuntungan utama, yaitu:

- Kontrol perangkat secara real-time, sehingga setiap perintah langsung diproses oleh ESP32.

- Koneksi selalu aktif, sehingga komunikasi berlangsung lebih stabil dan cepat.

- Tidak memerlukan refresh halaman web, karena pembaruan data dilakukan secara otomatis.

- Lebih efisien dibandingkan metode polling menggunakan HTTP.

- Pengalaman pengguna menjadi lebih baik, karena respons sistem terasa lebih cepat dan halus.

Membuat Aplikasi Chat antara Browser dan ESP32 Menggunakan WebSocket

Pada tutorial ini kita akan membuat aplikasi chat sederhana sebagai contoh implementasi WebSocket.

Meskipun hanya berupa aplikasi chat, konsep yang digunakan sama seperti pada sistem kontrol perangkat IoT. Nantinya, data teks yang dikirim dari browser dapat diganti menjadi perintah untuk menyalakan LED, menggerakkan servo, mengontrol relay, maupun fungsi lainnya. Sebaliknya, pesan yang dikirim dari ESP32 dapat diganti menjadi data sensor, status perangkat, atau informasi lainnya yang ingin ditampilkan secara langsung pada browser.

Struktur File Program

Agar kode lebih mudah dikelola, halaman web dipisahkan dari program utama ESP32. Dengan demikian, proyek akan terdiri dari dua file utama:

- File .ino, berisi program utama ESP32 yang menjalankan Web Server dan WebSocket Server.

- File index.h, berisi kode HTML, CSS, dan JavaScript yang digunakan sebagai antarmuka web (User Interface).

Pemisahan ini membuat struktur program menjadi lebih rapi serta memudahkan proses pengembangan dan pemeliharaan kode.

Langkah-langkah Menjalankan Program

1. Hubungkan ESP32 ke Komputer

Hubungkan board ESP32 ke komputer menggunakan kabel micro USB.

2. Buka Arduino IDE

Jalankan aplikasi Arduino IDE.

3. Pilih Board dan Port

Pilih jenis board ESP32 yang digunakan, misalnya ESP32 Dev Module, kemudian pilih port COM yang sesuai.

4. Instal Library yang Dibutuhkan

Buka Library Manager melalui menu di sebelah kiri Arduino IDE. Cari library DIYables ESP32 WebServer. Kemudian klik tombol Install untuk memasangnya.

5. Buat Sketch Baru

Buat sketch Arduino baru, kemudian simpan dengan nama misalnya:

esp32-websocket.ino

6. Salin Program Utama ESP32

Salin kode berikut ke dalam file esp32-websocket.ino.

#include <DIYables_ESP32_WebServer.h>

#include "index.h"

// WiFi credentials

const char WIFI_SSID[] = "YOUR_WIFI_SSID";

const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

// Create web server instance

DIYables_ESP32_WebServer server;

DIYables_ESP32_WebSocket* webSocket;

// Web Page handlers

void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {

  // HTML_CONTENT from the index.h file

  server.sendResponse(client, HTML_CONTENT);

}

// WebSocket event handlers

void onWebSocketOpen(net::WebSocket& ws) {

  Serial.println("New WebSocket connection");

  // Send welcome message

  const char welcome[] = "Connected to ESP32 WebSocket Server!";

}

void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {

  Serial.print("WebSocket Received (");

  Serial.print(length);

  Serial.print(" bytes): ");

  Serial.println(message);

  // Broadcast response to all connected clients using the library

  if (webSocket != nullptr) {

    String response = "Received:  " + String((char*)message);

    webSocket->broadcastTXT(response);

    Serial.print("WebSocket sent (");

    Serial.print(response.length());

    Serial.print(" bytes): ");

    Serial.println(response);

  }

}

void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {

  Serial.println("WebSocket client disconnected");

}

void setup() {

  Serial.begin(9600);

  delay(1000);

  Serial.println("ESP32 Web Server and WebSocket Server");

  // Configure web server routes

  server.addRoute("/", handleHome);

  // Start web server with WiFi connection

  server.begin(WIFI_SSID, WIFI_PASSWORD);

  // Enable WebSocket functionality

  webSocket = server.enableWebSocket(81);

  if (webSocket != nullptr) {

    // Set up WebSocket event handlers

    webSocket->onOpen(onWebSocketOpen);

    webSocket->onMessage(onWebSocketMessage);

    webSocket->onClose(onWebSocketClose);

  } else {

    Serial.println("Failed to start WebSocket server");

  }

}

void loop() {

  // Then handle HTTP requests

  server.handleClient();

  // Handle WebSocket

  server.handleWebSocket();

}

7. Sesuaikan Informasi WiFi

Ubah nilai SSID dan password WiFi pada program agar sesuai dengan jaringan yang akan digunakan oleh ESP32.

8. Membuat File index.h

Selanjutnya buat file baru bernama index.h.

Caranya:

- Klik tombol di bawah ikon Serial Monitor, kemudian pilih New Tab, atau tekan Ctrl + Shift + N.

 

- Beri nama file index.h, kemudian klik OK.

Setelah file berhasil dibuat, salin seluruh kode halaman web ke dalam file tersebut.

 

const char *HTML_CONTENT = R"=====(

<!DOCTYPE html>

<!-- saved from url=(0019)http://192.168.0.2/ -->

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>ESP32 WebSocket</title>

<meta name="viewport" content="width=device-width, initial-scale=0.7">

<link rel="icon" href="https://diyables.io/images/page/diyables.svg">

<style>

/* Add some basic styling for the chat window */

body {

  font-size: 16px;

}

.chat-container {

  width: 400px;

  margin: 0 auto;

  padding: 10px;

}

.chat-messages {

  height: 250px;

  overflow-y: auto;

  border: 1px solid #444;

  padding: 5px;

  margin-bottom: 5px;

}

.user-input {

  display: flex;

  margin-bottom: 20px;

}

.user-input input {

  flex: 1;

  border: 1px solid #444;

  padding: 5px;

}

.user-input button {

  margin-left: 5px;

  background-color: #007bff;

  color: #fff;

  border: none;

  padding: 5px 10px;

  cursor: pointer;

}

.websocket {

  display: flex;

  align-items: center;

  margin-bottom: 5px;

}

.websocket button {

  background-color: #007bff;

  color: #fff;

  border: none;

  padding: 5px 10px;

  cursor: pointer;

}

.websocket .label {

  margin-left: auto;

}

  

</style>

<script>

var ws;

var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */

function update_text(text) {

  var chat_messages = document.getElementById("chat-messages");

  chat_messages.innerHTML += text + '<br>';

  chat_messages.scrollTop = chat_messages.scrollHeight;

}

function send_onclick() {

  if(ws != null) {

    var message = document.getElementById("message").value;

    

    if (message) {

      document.getElementById("message").value = "";

      ws.send(message + "\n");

      update_text('<span style="color:navy">' + message + '</span>');

      // You can send the message to the server or process it as needed

    }

  }

}

function connect_onclick() {

  if(ws == null) {

    ws = new WebSocket("ws://" + window.location.host + ":81");

    document.getElementById("ws_state").innerHTML = "CONNECTING";

    ws.onopen = ws_onopen;

    ws.onclose = ws_onclose;

    ws.onmessage = ws_onmessage;

  } else

    ws.close();

}

function ws_onopen() {

  document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";

  document.getElementById("bt_connect").innerHTML = "Disconnect";

  document.getElementById("chat-messages").innerHTML = "";

}

function ws_onclose() {

  document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";

  document.getElementById("bt_connect").innerHTML = "Connect";

  ws.onopen = null;

  ws.onclose = null;

  ws.onmessage = null;

  ws = null;

}

function ws_onmessage(e_msg) {

  e_msg = e_msg || window.event; // MessageEvent

  console.log(e_msg.data);

  update_text('<span style="color:blue">' + e_msg.data + '</span>');

}

</script>

</head>

<body>

  <div class="chat-container">

    <h2>ESP32 WebSocket</h2>

    <div class="websocket">

      <button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>

      <span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>

    </div>

    <div class="chat-messages" id="chat-messages"></div>

    <div class="user-input">

      <input type="text" id="message" placeholder="Type your message...">

      <button onclick="send_onclick()">Send</button>

    </div>

  

  <div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>

</div>

</body></html>

)=====";

9. Periksa Struktur Program

Setelah selesai, proyek akan terdiri dari dua file, yaitu:

- esp32-websocket.ino

- index.h

Pastikan kedua file sudah berada dalam satu sketch Arduino IDE.

10. Upload Program ke ESP32

Klik tombol Upload untuk mengompilasi dan mengunggah program ke board ESP32.

11. Buka Serial Monitor

Setelah proses upload selesai, buka Serial Monitor.

12. Catat Alamat IP ESP32

Serial Monitor akan menampilkan alamat IP yang diperoleh ESP32 setelah berhasil terhubung ke jaringan WiFi.

Catat alamat IP tersebut, kemudian buka browser pada komputer atau smartphone yang masih berada dalam jaringan WiFi yang sama. Masukkan alamat IP tersebut ke bilah alamat browser.

13. Membuka Halaman Web

Jika berhasil, browser akan menampilkan halaman web seperti berikut:

14. Menghubungkan WebSocket

Klik tombol CONNECT untuk membuat koneksi WebSocket antara browser dan ESP32.

15. Mengirim Pesan ke ESP32

Masukkan beberapa teks pada kotak pesan, kemudian klik tombol SEND. ESP32 akan menerima pesan tersebut secara langsung dan mengirimkan balasan ke browser.

Bagaimana Sistem Ini Bekerja?

Berikut adalah alur kerja komunikasi antara browser dan ESP32 pada proyek ini:

1. Pengguna membuka alamat IP ESP32 melalui browser.

2. Browser mengirimkan permintaan HTTP kepada ESP32.

3. Web Server pada ESP32 mengirimkan file HTML, CSS, dan JavaScript yang terdapat pada file index.h.

4. Browser menampilkan halaman web kepada pengguna.

5. Ketika tombol CONNECT ditekan, kode JavaScript secara otomatis membangun koneksi WebSocket dengan server WebSocket yang berjalan pada ESP32.

6. Setelah koneksi berhasil dibuat, browser dan ESP32 dapat saling bertukar data secara langsung tanpa perlu me-refresh halaman.

7. Ketika pengguna mengetik pesan dan menekan tombol SEND, JavaScript mengirimkan data tersebut melalui koneksi WebSocket.

8. ESP32 menerima pesan, memprosesnya sesuai program yang dibuat, kemudian mengirimkan respons kembali ke browser melalui koneksi WebSocket yang sama.

9. Browser langsung menampilkan balasan dari ESP32 secara real-time.

Karena seluruh komunikasi berlangsung melalui koneksi WebSocket yang tetap aktif, proses pertukaran data menjadi sangat cepat, efisien, dan responsif. Konsep inilah yang menjadikan WebSocket sebagai salah satu teknologi utama dalam pengembangan aplikasi ESP32 berbasis web, terutama untuk sistem monitoring dan kontrol perangkat IoT secara real-time.

 

Baca juga: DIYables ESP32 Web Apps Web Plotter - Cara Membuat Serial Plotter Berbasis Web pada ESP32

 

 

 

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