การใช้งาน ESP32 WebSocket ส่งข้อมูลจากเซ็นเซอร์ DHT11 แบบเรียลไทม์
การใช้งาน ESP32 WebSocket ในปัจจุบัน Internet of Things (IoT) เป็นเทคโนโลยีที่มีการพัฒนาและใช้งานอย่างแพร่หลาย การเชื่อมต่อระหว่างอุปกรณ์ต่างๆ ผ่านอินเตอร์เน็ตช่วยให้เราสามารถควบคุมและตรวจสอบสภาพแวดล้อมได้อย่างมีประสิทธิภาพ บทความนี้จะนำเสนอวิธีการใช้งาน ESP32 WebSocket ในการส่งข้อมูลจากเซ็นเซอร์ DHT11 แบบเรียลไทม์ พร้อมโค้ดโปรแกรมสำหรับการใช้งานสารบัญ- หลักการทำงาน
- การสร้างหน้าเว็บ HTML และ JavaScript สำหรับการแสดงผลข้อมูลจาก ESP32
- โค้ดโปรแกรมESP32 WebSocket ด้วย Arduino IDE
- สรุปการใช้งาน ESP32 WebSocket ส่งข้อมูลจากเซ็นเซอร์ DHT11
- Download Code
วัตถุประสงค์ในการใช้งาน ESP32 WebSocket
- เข้าใจหลักการทำงานของ ESP32 และ WebSocket
- เรียนรู้การใช้งานเซ็นเซอร์ DHT11 ในการตรวจวัดอุณหภูมิและความชื้น
- พัฒนาโปรแกรมสำหรับ ESP32 เพื่อส่งข้อมูลจากเซ็นเซอร์ DHT11 แบบเรียลไทม์ผ่าน WebSocket
อุปกรณ์ที่ต้องใช้ในโครงงาน ESP32 WebSocket
- ESP32 Development Board
- เซ็นเซอร์ DHT11
- สาย Jumper
- บอร์ดทดลอง (Breadboard)
หลักการทำงานของ ESP32 WebSocket
ESP32 เป็นไมโครคอนโทรลเลอร์ที่มีความสามารถในการเชื่อมต่อ Wi-Fi และ Bluetooth ทำให้เป็นที่นิยมในงาน IoT ด้วยความสามารถในการประมวลผลที่สูงและราคาที่ไม่แพงWebSocket เป็นโปรโตคอลที่อนุญาตให้มีการสื่อสารแบบเรียลไทม์ระหว่างเซิร์ฟเวอร์และคลไคลเอนต์ มันสามารถเปิดการเชื่อมต่อที่ยังคงอยู่ตลอดเวลา ทำให้สามารถส่งข้อมูลไปกลับได้ทันทีโดยไม่ต้องรอการร้องขอใหม่การติดตั้งไลบรารี่
เพื่อให้สามารถใช้งาน ESP32 และ WebSocket ได้ เราจำเป็นต้องติดตั้งไลบรารี่ดังนี้:AsyncTCP – สำหรับการจัดการการเชื่อมต่อ TCP แบบไม่ขัดจังหวะ ESPAsyncWebServer – สำหรับการจัดการ WebSocket และ HTTP server DHT – สำหรับการอ่านค่าจากเซ็นเซอร์ DHT11โค้ดโปรแกรม
การเชื่อมต่อเซ็นเซอร์ DHT11 กับ ESP32 เชื่อมต่อขาของเซ็นเซอร์ DHT11 เข้ากับ ESP32 ตามตารางดังนี้:- VCC ของ DHT11 ต่อกับ 3.3V ของ ESP32
- GND ของ DHT11 ต่อกับ GND ของ ESP32
- Data ของ DHT11 ต่อกับ GPIO 4 ของ ESP32
การสร้างหน้าเว็บ HTML และ JavaScript สำหรับการใช้งาน ESP32 WebSocket
ในการแสดงผลข้อมูลจากเซ็นเซอร์ DHT11 ที่ส่งผ่าน WebSocket เราสามารถสร้างหน้าเว็บด้วย HTML และ JavaScript ได้ตามตัวอย่างต่อไปนี้:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESP32 DHT11 Data</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
h1 { color: #333; }
.data { font-size: 2em; }
</style>
</head>
<body>
<h1>Real-time DHT11 Sensor Data</h1>
<div>
<div>Temperature: <span id="temperature" class="data">--</span> &deg;C</div>
<div>Humidity: <span id="humidity" class="data">--</span> %</div>
</div>
<script>
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
function onLoad(event) {
initWebSocket();
}
function initWebSocket() {
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
function onMessage(event) {
var data = JSON.parse(event.data);
document.getElementById('temperature').innerHTML = data.temperature;
document.getElementById('humidity').innerHTML = data.humidity;
}
</script>
</body>
</html>
อธิบายโค้ด HTML และ JavaScript
1. โครงสร้าง HTML:ระบุว่าเป็นไฟล์ HTML และเริ่มต้นโครงสร้างหน้าเว็บ :<!DOCTYPE html> <html>ส่วนที่เก็บข้อมูลเกี่ยวกับหน้าเว็บ เช่น charset, viewport, และ title :
<head>การกำหนดสไตล์สำหรับหน้าเว็บ เช่น ฟอนต์และการจัดตำแหน่ง:
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
h1 { color: #333; }
.data { font-size: 2em; }
</style>
เนื้อหาหลักของหน้าเว็บ ซึ่งมีหัวเรื่องและส่วนที่แสดงข้อมูลอุณหภูมิและความชื้น :
<h1>Real-time DHT11 Sensor Data</h1>
<div>
<div>Temperature: <span id="temperature" class="data">--</span> &deg;C</div>
<div>Humidity: <span id="humidity" class="data">--</span> %</div>
</div>
2. การสร้าง WebSocket และจัดการเหตุการณ์:สร้าง WebSocket ที่เชื่อมต่อกับ ESP32 :
var gateway = ws://${window.location.hostname}/ws;
เรียกฟังก์ชัน onLoad เมื่อหน้าเว็บโหลดเสร็จ :window.addEventListener('load', onLoad);เริ่มต้นการเชื่อมต่อ WebSocket :
function onLoad(event) {
initWebSocket();
}
กำหนดการเชื่อมต่อ WebSocket และเหตุการณ์ต่างๆ (เปิด, ปิด, รับข้อความ) :
function initWebSocket() {
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
รับข้อมูลจาก WebSocket และอัพเดต HTML ด้วยข้อมูลอุณหภูมิและความชื้น :
function onMessage(event) {
var data = JSON.parse(event.data);
document.getElementById('temperature').innerHTML = data.temperature;
document.getElementById('humidity').innerHTML = data.humidity;
}
โค้ดโปรแกรมESP32 WebSocket ด้วย Arduino IDE
ต่อไปนี้เป็นโค้ดโปรแกรมสำหรับการอ่านข้อมูลจากเซ็นเซอร์ DHT11 และส่งข้อมูลผ่าน WebSocket:
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <DHT.h>
#include "index.h"
// กำหนดข้อมูลการเชื่อมต่อ Wi-Fi
const char* ssid = "your ssid";
const char* password = "your pass";
// กำหนด GPIO ที่เชื่อมต่อกับเซ็นเซอร์ DHT11
#define DHTPIN 4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
// ฟังก์ชันสำหรับการส่งข้อมูลเซ็นเซอร์ผ่าน WebSocket
void notifyClients() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String json = "{\"temperature\":";
json += String(temperature);
json += ",\"humidity\":";
json += String(humidity);
json += "}";
//Debug
Serial.println("temperature:"+String(temperature));
Serial.println("humidity:"+String(humidity));
Serial.println(json);
//Update Data to client
ws.textAll(json);
}
// ฟังก์ชัน callback เมื่อมีการเชื่อมต่อ WebSocket ใหม่
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
if (type == WS_EVT_CONNECT) {
Serial.println("WebSocket client connected");
client->ping();
} else if (type == WS_EVT_DISCONNECT) {
Serial.println("WebSocket client disconnected");
}
}
void setup() {
// เริ่มต้น Serial Monitor
Serial.begin(115200);
// เริ่มต้นเซ็นเซอร์ DHT11
dht.begin();
// เชื่อมต่อ Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("Local ESP32 IP: ");
Serial.println(WiFi.localIP());
// เริ่มต้น WebSocket
ws.onEvent(onEvent);
server.addHandler(&ws);
// คำร้องขอ root url HTML
server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/html", index_html);
});
// เริ่มต้นเซิร์ฟเวอร์
server.begin();
}
void loop() {
// ตรวจสอบข้อมูลเซ็นเซอร์และส่งข้อมูลทุกๆ 2 วินาที
static unsigned long lastTime = 0;
if (millis() - lastTime > 2000) {
notifyClients();
lastTime = millis();
}
ws.cleanupClients();
}
การอธิบายโค้ดการใช้งาน ESP32 WebSocket
การกำหนดค่าและการเชื่อมต่อ Wi-Fi : ส่วนนี้จะเชื่อมต่อ ESP32 เข้ากับ Wi-Fi ตามที่กำหนด ในตัวแปร “ssid”, “password”
// กำหนดข้อมูลการเชื่อมต่อ Wi-Fi
const char* ssid = your ssid";
const char* password = "your pass";
// เชื่อมต่อ Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.print("Local ESP32 IP: ");
Serial.println(WiFi.localIP());
การกำหนดค่าเซ็นเซอร์ DHT11:
ส่วนนี้จะกำหนดขาที่เชื่อมต่อกับเซ็นเซอร์ DHT11 และเริ่มต้นการทำงานของเซ็นเซอร์#define DHTPIN 4 #define DHTTYPE DHT11 DHT dht(DHTPIN, DHTTYPE); dht.begin();การกำหนดค่า WebSocket: ส่วนนี้จะกำหนดค่าและเริ่มต้น WebSocket บนพอร์ต 80
AsyncWebServer server(80); AsyncWebSocket ws("/ws"); ws.onEvent(onEvent); server.addHandler(&ws); server.begin();การอ่านข้อมูลจากเซ็นเซอร์และส่งผ่าน WebSocket: ส่วนนี้จะอ่านข้อมูลอุณหภูมิและความชื้นจากเซ็นเซอร์ DHT11 และส่งข้อมูลผ่าน WebSocket ในรูปแบบ JSON
void notifyClients() {
float temperature = dht.readTemperature();
float humidity = dht.readHumidity();
String json = "{\"temperature\":";
json += String(temperature);
json += ",\"humidity\":";
json += String(humidity);
json += "}";
//Debug
Serial.println("temperature:"+String(temperature));
Serial.println("humidity:"+String(humidity));
Serial.println(json);
//Update Data to client
ws.textAll(json);
}
การจัดการการเชื่อมต่อ WebSocket:
ส่วนนี้จะจัดการเหตุการณ์เมื่อมีการเชื่อมต่อหรือยกเลิกการเชื่อมต่อ WebSocket
void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
if (type == WS_EVT_CONNECT) {
Serial.println("WebSocket client connected");
client->ping();
} else if (type == WS_EVT_DISCONNECT) {
Serial.println("WebSocket client disconnected");
}
}
Download Code ESP32 WebSocket อัพเดทข้อมูลเซ็นเซอร์ DHT11 เรียลไทม์
ดาวน์โหลดไฟล์ทั้งหมดได้ที่นี้
สรุปการใช้งาน ESP32 WebSocket ส่งข้อมูลจากเซ็นเซอร์ DHT11
การใช้งาน ESP32 WebSocket สำหรับส่งข้อมูลจากเซ็นเซอร์ DHT11 แบบเรียลไทม์ช่วยให้สามารถพัฒนาโปรเจกต์ IoT ที่มีประสิทธิภาพและทันสมัยได้ง่ายขึ้น ด้วยการใช้ ESP32 ซึ่งเป็นไมโครคอนโทรลเลอร์ที่มี Wi-Fi และ Bluetooth พร้อมทั้งการใช้งาน WebSocket ที่เป็นโปรโตคอลการสื่อสารแบบเรียลไทม์ ทำให้สามารถส่งข้อมูลอุณหภูมิและความชื้นจากเซ็นเซอร์ DHT11 ไปยังหน้าเว็บได้ทันทีโค้ดตัวอย่างที่ให้ไว้ในบทความนี้เริ่มต้นจากการตั้งค่าและเชื่อมต่อกับ Wi-Fi การอ่านข้อมูลจากเซ็นเซอร์ DHT11 และส่งข้อมูลผ่าน WebSocket รวมถึงการสร้างหน้าเว็บ HTML และ JavaScript เพื่อแสดงผลข้อมูลที่ได้รับ โค้ดนี้สามารถนำไปใช้งานและต่อยอดในการพัฒนาโปรเจกต์ IoT ที่ซับซ้อนมากขึ้นได้ เช่น การบันทึกข้อมูลลงฐานข้อมูล การแสดงผลข้อมูลแบบเรียลไทม์ หรือการแจ้งเตือนเมื่อค่าต่างๆ เกินกว่าที่กำหนดการใช้งาน ESP32 WebSocket ช่วยให้สามารถสร้างระบบที่ตอบสนองได้ทันทีและมีความยืดหยุ่นสูง ทำให้เป็นเครื่องมือที่มีประโยชน์และสำคัญในการพัฒนาโปรเจกต์ IoT ที่ต้องการความแม่นยำและประสิทธิภาพสูงบทความ 5 เรื่องที่น่าสนใจบนเว็บ DevaDIY :
“หากยังไม่รู้จัก ESPAsyncWebServer มาก่อน แนะนำให้อ่านคู่มือฉบับเต็มก่อนใช้งานจริง”
🔗 ESPAsyncWebServer Guide
