Kiến thức
Lập trình ESP32 – Bài 13: ESP32 – Đọc cảm biến nhiệt độ, độ ẩm DHT11 và hiển thị dữ liệu realtime qua WebSocket
Th11 2025
Hướng dẫn kết nối và đọc cảm biến DHT11 bằng ESP32 và hiển thị dữ liệu nhiệt độ và độ ẩm theo thời gian thực trên trình duyệt bằng WebSocket.
Mục lục
- Giới thiệu
- Nguyên lý cảm biến DHT11
- Phần cứng cần chuẩn bị
- Sơ đồ kết nối
- Cài thư viện
- Mã nguồn hoàn chỉnh
- Giải thích mã
- Kết quả hiển thị
- Gợi ý mở rộng
1) Giới thiệu
Cảm biến DHT11 là loại cảm biến phổ biến dùng để đo nhiệt độ và độ ẩm môi trường.
Trong bài này, ta sẽ:
- Kết nối DHT11 với ESP32 (GPIO4)
- Tạo WebSocket server
- Gửi dữ liệu realtime tới trình duyệt để hiển thị bằng biểu đồ.
2) Nguyên lý hoạt động
- DHT11 có 3 chân: VCC, DATA, GND
- Tín hiệu DATA truyền ở mức logic số (digital).
- Chu kỳ cập nhật: ~1 giây/lần.
- Dải đo:
- Nhiệt độ: 0°C → 50°C
- Độ ẩm: 20% → 90%
3) Phần cứng cần chuẩn bị
| Linh kiện | Số lượng | Ghi chú |
|---|---|---|
| ESP32 DevKit V1 | 1 | |
| Cảm biến DHT11 | 1 | Loại module 3 chân hoặc 4 chân |
| Điện trở 10kΩ | 1 | (nếu dùng cảm biến rời) kéo lên DATA |
| Breadboard & dây nối | Vài sợi |
4) Sơ đồ kết nối (Connection Diagram)
- DHT11 VCC → 3.3V
- DHT11 GND → GND
- DHT11 DATA → GPIO4
- Điện trở 10kΩ giữa DATA và 3.3V (nếu cảm biến rời).
- Dữ liệu được gửi realtime qua WiFi → WebSocket → Trình duyệt hiển thị biểu đồ.
(Sơ đồ kết nối sẽ được tạo ngay sau bài viết)
5) Cài thư viện
Trong Arduino IDE, vào Tools → Manage Libraries…, tìm và cài:
- DHT sensor library (by Adafruit)
- Adafruit Unified Sensor
- arduinoWebSockets (by Links2004)
6) Mã nguồn hoàn chỉnh
#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
#include "DHT.h"
#define DHTPIN 4
#define DHTTYPE DHT11
const char* ssid = "YourWiFiName";
const char* password = "YourPassword";
DHT dht(DHTPIN, DHTTYPE);
WebServer http(80);
WebSocketsServer ws(81);
const char HTML_PAGE[] 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 DHT11 Realtime</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: system-ui; text-align:center; padding:30px;}
canvas { max-width:600px; margin:auto; }
</style>
</head>
<body>
<h1>ESP32 - DHT11 Realtime Data</h1>
<canvas id="chart"></canvas>
<script>
let ws, dataT=[], dataH=[];
const ctx=document.getElementById('chart');
const chart=new Chart(ctx,{type:'line',data:{
labels:[],datasets:[
{label:'Temp (°C)',data:[],borderColor:'#f87171'},
{label:'Humidity (%)',data:[],borderColor:'#60a5fa'}
]},
options:{scales:{y:{beginAtZero:true,max:100}}}
});
function connect(){
ws = new WebSocket('ws://' + location.hostname + ':81/');
ws.onmessage=e=>{
const [t,h]=e.data.split(',');
dataT.push(parseFloat(t));
dataH.push(parseFloat(h));
if(dataT.length>50){ dataT.shift(); dataH.shift(); }
chart.data.labels=dataT.map((_,i)=>i);
chart.data.datasets[0].data=dataT;
chart.data.datasets[1].data=dataH;
chart.update();
};
ws.onclose=()=>setTimeout(connect,1500);
}
connect();
</script>
</body></html>
)HTML";
void handleRoot() {
http.send_P(200, "text/html", HTML_PAGE);
}
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password);
Serial.print("Connecting WiFi");
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); }
Serial.println("\n✅ WiFi connected: " + WiFi.localIP().toString());
http.on("/", handleRoot);
http.begin();
ws.begin();
Serial.println("✅ Web Server :80");
Serial.println("✅ WebSocket :81");
}
unsigned long lastSend = 0;
void loop() {
http.handleClient();
ws.loop();
unsigned long now = millis();
if (now - lastSend > 2000) { // 2s/lần
float t = dht.readTemperature();
float h = dht.readHumidity();
if (!isnan(t) && !isnan(h)) {
String msg = String(t, 1) + "," + String(h, 1);
ws.broadcastTXT(msg);
Serial.println("Send: " + msg);
}
lastSend = now;
}
}
7) Giải thích mã
DHT.readTemperature()vàDHT.readHumidity()đọc dữ liệu.- WebSocket gửi chuỗi
"temp,humidity"sang trình duyệt. - JS tách chuỗi, hiển thị biểu đồ realtime bằng Chart.js.
- Không cần reload trang, dữ liệu tự động cập nhật.
8) Kết quả hiển thị
- Mở Serial Monitor → ghi lại địa chỉ IP.
- Truy cập
http://<ESP32_IP>→ thấy biểu đồ realtime. - Khi thổi hơi hoặc dùng tay chạm cảm biến → nhiệt độ tăng, độ ẩm thay đổi.
9) Gợi ý mở rộng
- Gửi dữ liệu lên Firebase Realtime Database.
- Hiển thị nhiều cảm biến cùng lúc (DHT11 + DS18B20).
- Gửi cảnh báo khi nhiệt độ vượt ngưỡng.
- Dùng WebSocket secure (wss://) qua reverse proxy.