Lập trình ESP32 – Bài 8: WebSocket – Điều khiển LED realtime từ trình duyệt

Dùng WebSocket để điều khiển LED ESP32 theo thời gian thực từ trình duyệt. Bài viết có sơ đồ kết nối, mã ví dụ đầy đủ, giải thích rõ ràng và gợi ý mở rộng.

Mục lục

Giới thiệu
Tại sao dùng WebSocket?
Phần cứng cần chuẩn bị
Sơ đồ kết nối
Mã nguồn ESP32 (WebSocket + Web UI)
Giải thích mã
Cách truy cập & kiểm thử
Gợi ý mở rộng

1) Giới thiệu

So với HTTP thông thường, WebSocket tạo kết nối 2 chiều bền vững giữa trình duyệt và ESP32. Nhờ vậy, việc bật/tắt LED hoặc hiển thị trạng thái realtime mượt mà, không cần reload trang hoặc polling liên tục.

2) Tại sao dùng WebSocket?

Realtime: cập nhật ngay khi có sự kiện.
Tiết kiệm băng thông: không cần gửi request lặp lại.
Đơn giản hóa logic: một kênh cho cả gửi và nhận.

3) Phần cứng cần chuẩn bị

Linh kiện	Số lượng	Ghi chú
ESP32 DevKit V1	1
LED đỏ	1
Điện trở 220Ω	1	Nối tiếp LED
Dây nối/Breadboard	Vài sợi

4) Sơ đồ kết nối (Connection Diagram)

GPIO2 → (220Ω) → Anode LED → Cathode → GND
USB cấp nguồn cho ESP32.
Truy cập WebSocket qua cùng mạng Wi-Fi.

5) Mã nguồn ESP32 (WebSocket + Web UI)

Thư viện dùng sẵn trong core ESP32: WiFi.h, WebServer.h, WebSocketsServer.h (nằm trong arduinoWebSockets). Nếu IDE của bạn chưa có, cài arduinoWebSockets (by Links2004) trong Library Manager.

#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>

#define LED_PIN 2

// ==== WiFi (đổi theo mạng của bạn) ====
const char* ssid     = "YourWiFiName";
const char* password = "YourPassword";

// HTTP server (phục vụ trang web)
WebServer http(80);

// WebSocket server trên cổng 81
WebSocketsServer ws(81);

// ---- HTML UI (inline) ----
const char INDEX_HTML[] PROGMEM = R"HTML(
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP32 WebSocket - Realtime LED</title>
<style>
 body { font-family: system-ui, Arial; text-align:center; padding:30px; }
 button { font-size:18px; padding: 12px 24px; margin:8px; border:0; color:#fff; cursor:pointer;}
 .on{background:#10b981;} .off{background:#ef4444;}
 .state{margin-top:14px; font-weight:700}
</style>
</head>
<body>
<h1>ESP32 WebSocket - Realtime LED</h1>
<div id="ip"></div>
<button class="on"  onclick="send('ON')">LED ON</button>
<button class="off" onclick="send('OFF')">LED OFF</button>
<div class="state" id="s">Connecting...</div>
<script>
let ws;
function connect(){
  const host = location.hostname || prompt('ESP32 IP?');
  ws = new WebSocket('ws://' + host + ':81/');
  ws.onopen  = () => { document.getElementById('s').textContent='Connected'; ws.send('STATE'); };
  ws.onclose = () => { document.getElementById('s').textContent='Disconnected. Reconnecting...'; setTimeout(connect, 1500); };
  ws.onmessage = (e) => { document.getElementById('s').textContent = 'LED: ' + e.data; };
}
function send(cmd){ if(ws && ws.readyState===1) ws.send(cmd); }
document.getElementById('ip').textContent = 'Open this page via http://' + location.host;
connect();
</script>
</body></html>
)HTML";

// ---- Handlers ----
void handleRoot(){ http.send_P(200, "text/html", INDEX_HTML); }

void onWsEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
  switch(type){
    case WStype_CONNECTED: {
      // Gửi trạng thái hiện tại khi client vừa kết nối
      String s = digitalRead(LED_PIN) ? "ON" : "OFF";
      ws.sendTXT(num, s);
      break;
    }
    case WStype_TEXT: {
      String msg = String((char*)payload).substring(0, length);
      if (msg == "ON") digitalWrite(LED_PIN, HIGH);
      else if (msg == "OFF") digitalWrite(LED_PIN, LOW);
      else if (msg == "STATE") { /* chỉ yêu cầu trạng thái */ }
      // phát lại trạng thái tới tất cả client
      String s = digitalRead(LED_PIN) ? "ON" : "OFF";
      ws.broadcastTXT(s);
      break;
    }
    default: break;
  }
}

void setup(){
  Serial.begin(115200);
  pinMode(LED_PIN, OUTPUT);
  digitalWrite(LED_PIN, LOW);

  WiFi.begin(ssid, password);
  Serial.print("Connecting WiFi");
  while(WiFi.status()!=WL_CONNECTED){ delay(500); Serial.print("."); }
  Serial.println("\n✅ WiFi: " + WiFi.localIP().toString());

  http.on("/", handleRoot);
  http.begin();
  Serial.println("✅ HTTP server :80 started");

  ws.begin();
  ws.onEvent(onWsEvent);
  Serial.println("✅ WebSocket   :81 started");
}

void loop(){
  http.handleClient();
  ws.loop();
}

6) Giải thích mã

WebSocketsServer ws(81): mở server WebSocket cổng 81.
ws.onEvent: nhận lệnh "ON", "OFF", "STATE".
broadcastTXT: đẩy trạng thái LED tới tất cả client đang mở trang.
Trang HTML kết nối ws://<esp_ip>:81/ và cập nhật UI tức thì khi có tin nhắn.

7) Cách truy cập & kiểm thử

Nạp code, mở Serial Monitor xem IP: 192.168.x.x.
Trên điện thoại/PC cùng mạng, mở trình duyệt: http://<ESP32_IP>/
Nhấn LED ON/OFF. Bạn sẽ thấy trạng thái cập nhật theo thời gian thực.
Mở 2 thiết bị cùng lúc: bật/tắt trên một thiết bị → thiết bị kia cập nhật ngay.

8) Gợi ý mở rộng

Dùng Secure WebSocket (wss://) với chứng chỉ khi phục vụ qua HTTPS reverse proxy.
Thêm nhiều GPIO hoặc slider PWM để điều chỉnh độ sáng.
Hiển thị số liệu cảm biến (DHT11, LDR) realtime qua WebSocket.
Tách UI ra SPIFFS/LittleFS, thêm chart (Chart.js) để trực quan.

Học Lập Trình Robot

Lập trình ESP32 – Bài 8: WebSocket – Điều khiển LED realtime từ trình duyệt

1) Giới thiệu

2) Tại sao dùng WebSocket?

3) Phần cứng cần chuẩn bị

4) Sơ đồ kết nối (Connection Diagram)

5) Mã nguồn ESP32 (WebSocket + Web UI)

6) Giải thích mã

7) Cách truy cập & kiểm thử

8) Gợi ý mở rộng

Comments

Để lại một bình luận Hủy

More posts

Tìm Hiểu Chi Tiết Về Board ESP32 38 Pin – Cấu Tạo, Sơ Đồ Chân, Ứng Dụng

So Sánh Các Chuẩn Giao Tiếp UART, SPI, I2C – Cách Hoạt Động & Ứng Dụng Thực Tế

Tìm Hiểu Nguyên Lý UART – Giao Tiếp Nối Tiếp Trong Vi Điều Khiển

Hướng dẫn cấp nguồn pin cho dự án điện tử, Arduino, ESP32 – Hiểu Đúng Để Mạch Ổn Định