เริ่มต้นใช้งาน ESPAsyncWebServer กับ ESP32 สำหรับควบคุมอุปกรณ์ผ่านหน้าเว็บ

/ ESP32, esp32 wifi network, พื้นฐาน ESP32, เทคนิคโค้ด

คู่มือใช้งาน ESPAsyncWebServer กับ ESP32 สร้างหน้าเว็บควบคุมอุปกรณ์และ WiFi Manager

ESPAsyncWebServer คืออะไร?

ESPAsyncWebServer คือไลบรารีสำหรับ ESP32/ESP8266 ที่ช่วยให้เราสามารถสร้างเว็บเซิร์ฟเวอร์แบบ Asynchronous (ไม่บล็อกการทำงานหลัก) ซึ่งแตกต่างจาก WebServer ปกติที่เป็นแบบ synchronous (ทำงานทีละคำสั่ง)

รายการเปรียบเทียบ	`WebServer` ปกติ	`ESPAsyncWebServer`
📌 ลักษณะการทำงาน	Synchronous (รอคำสั่งเสร็จก่อนถึงทำต่อ)	Asynchronous (ทำงานขนานได้ ไม่ต้องรอ)
⚙️ ประสิทธิภาพ	มีโอกาสค้างหรือช้า เมื่อโหลดสูง	รองรับการเชื่อมต่อพร้อมกันได้หลาย client ลื่นไหลกว่า
💻 ใช้กับ WebSocket	ไม่รองรับโดยตรง	รองรับ WebSocket แบบ async ในตัว
🧠 การเขียนโค้ด	ง่าย เหมาะสำหรับงานเล็ก	ยากขึ้นเล็กน้อยแต่ยืดหยุ่นกว่า
⚠️ บล็อก loop()	ใช่	ไม่

✅ ทำไมควรใช้ ESPAsyncWebServer กับ Smart Farm หรือระบบจริง?

เพราะระบบอย่าง Smart Farm ที่มีทั้ง

การแสดงค่าเซนเซอร์แบบเรียลไทม์
ควบคุมรีเลย์หลายตัวผ่านเว็บ
การเชื่อมต่อหลายอุปกรณ์พร้อมกัน (มือถือ, คอมฯ)
การใช้ WebSocket ส่งข้อมูลตลอดเวลา

ต้องการการตอบสนองเร็ว ไม่ค้าง, ไม่แฮงค์, ไม่ block loop() — ซึ่ง ESPAsyncWebServer จัดการได้สบาย

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

AsyncWebServer server(80);

void setup() {
  WiFi.begin("your-ssid", "your-password");
  while (WiFi.status() != WL_CONNECTED) delay(1000);

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", "Hello from ESP32!");
  });

  server.begin();
}

ถ้าคุณต้องการทำระบบควบคุมผ่าน Wi-Fi ที่ตอบสนองไว ใช้งานหลายคนพร้อมกันได้ และไม่อยากให้ loop() ค้าง — ใช้ ESPAsyncWebServer คือทางเลือกที่เหมาะกว่า WebServer ปกติครับ

หากคุณยังไม่เคยใช้ไมโครคอนโทรลเลอร์ตัวนี้ แนะนำให้อ่าน ESP32 คืออะไร? จุดเด่นและการใช้งานเบื้องต้น ก่อนเริ่มลงมือ

การติดตั้งไลบรารี ESPAsyncWebServer และ AsyncTCP

🔧 วิธีที่ 1: ติดตั้งผ่าน Library Manager (ง่ายสุด)

เปิด Arduino IDE
ไปที่เมนู Tools > Board เลือก ESP32 Dev Module
ไปที่เมนู Sketch > Include Library > Manage Libraries…
พิมพ์ค้นหา:
✅ ESPAsyncWebServer → คลิกติดตั้ง
✅ AsyncTCP → คลิกติดตั้ง
รอจนติดตั้งเสร็จ แล้วกดปิดหน้าต่าง

💡 หมายเหตุ: ไลบรารี AsyncTCP จำเป็นต้องใช้ร่วมกับ ESPAsyncWebServer หากไม่มีจะ compile ไม่ผ่าน

🛠️ วิธีที่ 2: ติดตั้งแบบ Manual ผ่าน GitHub

ถ้าติดตั้งผ่าน Library Manager ไม่เจอ หรือใช้ VSCode + PlatformIO ให้ใช้วิธีนี้แทน:

📁 ดาวน์โหลดจาก GitHub

🔽 ขั้นตอนการติดตั้ง

กดปุ่มสีเขียว “Code” > เลือก “Download ZIP”
ไปที่ Arduino IDE:
✅ เมนู Sketch > Include Library > Add .ZIP Library…
✅ เลือกไฟล์ .zip ที่โหลดมา
ติดตั้งให้ครบทั้ง 2 ไลบรารี

⚠️ ข้อควรระวัง

ใช้กับ ESP32 เท่านั้น
ต้องติดตั้ง AsyncTCP ก่อน ESPAsyncWebServer
หากใช้ PlatformIO ให้ใส่ใน platformio.ini แบบนี้:

lib_deps =
me-no-dev/ESP Async WebServer @ ^1.2.3
me-no-dev/AsyncTCP

ถ้ายังไม่เคยใช้ Arduino IDE มาก่อน ลองคลิกอ่าน Arduino IDE Guide สำหรับผู้เริ่มต้น เพื่อรู้วิธีติดตั้งและเตรียมเขียนโค้ดง่าย ๆ ได้ทันที

✅ ทดสอบว่าใช้งานได้

ลองเปิดตัวอย่างนี้ใน Arduino IDE:

File > Examples > ESPAsyncWebServer > HelloServer

วิธีติดตั้ง	เหมาะกับใคร
Library Manager	มือใหม่ ใช้งาน Arduino IDE
GitHub ZIP	ใช้ VSCode / ติดตั้งไม่ได้
PlatformIO	ใช้งานกับ VSCode โดยตรง

โครงสร้างโค้ดเบื้องต้นของ ESPAsyncWebServer

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

// กำหนดชื่อ WiFi และรหัสผ่าน
const char* ssid = "ชื่อ WiFi";
const char* password = "รหัสผ่าน";

// ประกาศ server บน port 80
AsyncWebServer server(80);

void setup() {
  Serial.begin(115200);

  // เชื่อมต่อ WiFi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi Connected. IP: ");
  Serial.println(WiFi.localIP());

  // 🌐 กำหนด Route ต่าง ๆ
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", "สวัสดีจาก ESP32!");
  });

  server.on("/status", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "application/json", "{\"status\":\"ok\"}");
  });

  // ✅ เริ่มต้น server
  server.begin();
}

void loop() {
  // ไม่มีโค้ดอะไรใน loop เพราะ ESPAsyncWebServer ไม่ต้องใช้ loop ทำงาน
}

🔍 อธิบายแต่ละส่วน

🔹 setup()

ใช้สำหรับ:
- เชื่อมต่อ WiFi
- กำหนดเส้นทาง (route) ของเว็บเซิร์ฟเวอร์
- เริ่มต้นการทำงานของ server

🔹 loop()

ไม่ต้องใส่อะไรเลย! เพราะ ESPAsyncWebServer ทำงานแบบ asynchronous (อัตโนมัติ) อยู่เบื้องหลัง ไม่ต้องวน loop เหมือน WebServer ปกติ

🔹 Route (เส้นทาง)

server.on("/path", HTTP_METHOD, callback);

ตัวอย่าง Route	ทำอะไร
`"/"`	หน้าแรก
`"/status"`	ส่ง JSON บอกสถานะ
`"/toggle"`	คำสั่งเปิด/ปิดอุปกรณ์

server.on("/toggle", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(4, !digitalRead(4)); // toggle ขา GPIO 4
request-&gt;send(200, "text/plain", "Toggled!");
});

💡 ข้อดีของโค้ดแบบนี้

รองรับการเชื่อมต่อหลาย client พร้อมกัน
ตอบสนองเร็ว ไม่ค้าง loop
ขยายฟังก์ชันเพิ่ม route ได้เรื่อย ๆ
เหมาะกับระบบควบคุม Smart Farm, IoT, และ Home Automation

✅ ตัวอย่างใช้จริง

192.168.1.23/ → แสดงข้อความทักทาย
192.168.1.23/status → ส่งค่า JSON
192.168.1.23/toggle → เปิด/ปิดอุปกรณ์

สร้างหน้า Web Page ด้วย HTML/CSS ในโค้ด

✅ แนวทางที่ 1: ฝัง HTML ลงในโค้ดโดยตรง (แบบเร็ว ง่าย)

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  String html = "<!DOCTYPE html><html><head><meta charset='utf-8'><title>PoPo Farm</title></head>";
  html += "<body><h1>สวัสดีจาก ESP32</h1><p>ควบคุมอุปกรณ์ได้ที่นี่</p></body></html>";
  request->send(200, "text/html", html);
});

👍 ข้อดี:

เขียนง่าย เหมาะกับหน้าเล็กๆ
ไม่ต้องใช้พื้นที่เก็บข้อมูล

👎 ข้อเสีย:

อ่านยาก แก้ไขลำบาก
หน้าเว็บใหญ่แล้วจะรกมาก
CSS/JS ฝังยาก

✅ แนวทางที่ 2: แยก HTML/CSS ไว้ในไฟล์ แล้วโหลดจาก SPIFFS

วิธีนี้แนะนำที่สุดสำหรับโปรเจกต์ Smart Farm ที่ต้องการโหลดหน้าเว็บเร็ว + แยกโค้ดชัดเจน

📁 โครงสร้างโฟลเดอร์

/data
├─ index.html
├─ style.css
└─ script.js

main.ino

ขั้นตอนการใช้งาน SPIFFS

ใส่ไลบรารีที่จำเป็น
```
#include <SPIFFS.h>
#include <ESPAsyncWebServer.h>
```

เริ่มต้น SPIFFS ใน setup()

if(!SPIFFS.begin(true)){
Serial.println("SPIFFS Mount Failed");
return;
}

เสิร์ฟไฟล์ HTML/CSS/JS

server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

หรือแบบกำหนดเอง:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request-&gt;send(SPIFFS, "/index.html", "text/html");
});server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
request-&gt;send(SPIFFS, "/style.css", "text/css");
});

อัปโหลดไฟล์ /data ไปยังบอร์ด – ให้ติดตั้ง ESP32 Sketch Data Upload ใน Arduino IDE – แล้วกด Tools > ESP32 Sketch Data Upload เพื่ออัปโหลดไฟล์ HTML/CSS เข้า SPIFFS

✨ ตัวอย่าง index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>PoPo Smart Farm</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ยินดีต้อนรับสู่ระบบฟาร์ม</h1>
  <button onclick="togglePump()">เปิด/ปิด ปั๊มน้ำ</button>

  <script>
    function togglePump() {
      fetch("/toggle");
    }
  </script>
</body>
</html>

✅ สรุปแนวทางโหลดเว็บให้เร็ว

แนวทาง	เหมาะกับ
HTML ในโค้ด	เว็บเล็กๆ ทดสอบ UI เบื้องต้น
HTML แยกไว้ใน SPIFFS	เว็บจริง แยกโค้ดชัด โหลดเร็วกว่า

สร้าง WiFi Manager ด้วย ESPAsyncWebServer

ใช้หน้าเว็บเพื่อเชื่อมต่อ WiFi โดยไม่ต้องแก้โค้ดใหม่

🔗 บทความ: สร้างหน้า WiFi Manager ด้วย ESPAsyncWebServer เบื้องต้น
🔗 บทเรียนสอน: สร้างหน้า WiFi Manager ด้วย ESPAsyncWebServer แบบมือโปร

📌 หากคุณต้องการบันทึกข้อมูลแบบถาวร เช่น SSID, Password, หรือโหมดของระบบอัตโนมัติ แนะนำให้ใช้ Preferences ควบคู่กับ ESPAsyncWebServer 🔗 ดูวิธีใช้งาน Preferences กับ ESP32

การควบคุมอุปกรณ์ผ่าน Web Server (เช่น Relay)

👉 ดูตัวอย่างการสร้างปุ่ม ON/OFF เพื่อควบคุมรีเลย์บนหน้าเว็บ

🔗 สอนสร้าง ESP32 Web Server ควบคุมรีเลย์

การแสดงค่าจากเซนเซอร์ผ่านหน้าเว็บ

หากต้องการต่อยอดให้แสดงค่าเซนเซอร์หลายจุด หรือเพิ่มกราฟแสดงผล สามารถดูตัวอย่างในบทความนี้

✅ บทความ: 🔗 ESP32 Realtime Sensor

สรุป

ทำไม `ESPAsyncWebServer` ถึงเหมาะกับระบบ Smart Farm และ งานอัตโนมัติ

ESPAsyncWebServer คือไลบรารีเว็บเซิร์ฟเวอร์ที่ ทำงานแบบ Asynchronous (ไม่บล็อกการทำงานหลัก) ซึ่งเหมาะมากกับงานที่ต้องการ ความเร็ว เสถียร และตอบสนองพร้อมกันหลายคำสั่ง

จุดเด่น	ประโยชน์กับ Smart Farm
⚡ ไม่บล็อก loop()	ESP32 ยังอ่านเซนเซอร์ ควบคุมรีเลย์ได้แม้มีการสื่อสารจากแอป
🌐 รองรับ WebSocket	ส่งข้อมูลแบบเรียลไทม์ เช่น ค่าอุณหภูมิ, ความชื้น, ปั๊มเปิด/ปิด
📡 รองรับการเชื่อมต่อหลาย client	มือถือ, คอม, Tablet เข้าเว็บพร้อมกันได้ไม่แฮงค์
🧠 จัดการ request แต่ละอันแยกอิสระ	เปิดไฟ + ปรับปั๊มน้ำ + อ่านค่าดิน → ทำพร้อมกันได้
🔒 เสถียรกว่า WebServer ปกติ	ใช้งานระยะยาว ไม่แฮงค์แม้รันต่อเนื่องหลายวัน
🧩 ขยายระบบง่าย	เพิ่มหน้า WiFi Manager, Dashboard, Auto Mode ได้ง่าย
📁 ใช้ร่วมกับ SPIFFS ได้ดี	โหลดไฟล์ HTML/CSS/JS แยก ช่วยให้เว็บโหลดเร็ว

🎯 เหมาะกับงานประเภทไหน?

✅ Smart Farm อัตโนมัติ (ควบคุมพัดลม, ปั๊ม, ไฟ)
✅ ระบบปลูกผักในห้อง (Indoor)
✅ ให้อาหารปลา, ควบคุมแสง UV, ระบบพ่นหมอก
✅ ระบบบ้านอัจฉริยะ (Smart Home)
✅ การแสดงข้อมูลเซนเซอร์แบบเรียลไทม์

❓ คำถามที่พบบ่อย (FAQ)

Q1: ESPAsyncWebServer คืออะไร?

A: ESPAsyncWebServer เป็นไลบรารีที่ช่วยให้ ESP32 สร้างเว็บเซิร์ฟเวอร์แบบ asynchronous ทำงานเร็ว ไม่บล็อคการทำงานอื่น ๆ เหมาะสำหรับควบคุมอุปกรณ์หรือแสดงค่าบนหน้าเว็บแบบไม่รีเฟรช

Q2: ต่างจาก WebServer ปกติยังไง?

A: WebServer แบบเดิม (blocking) จะค้างระหว่างรอคำสั่ง ส่วน AsyncWebServer จะประมวลผลหลายอย่างพร้อมกัน เช่น อ่าน sensor + แสดงผล + รับคำสั่ง ได้ในเวลาเดียวกัน

Q3: ใช้ ESPAsyncWebServer ต้องติดตั้งอะไรบ้าง?

A: ต้องติดตั้ง 2 ไลบรารีหลักใน Arduino IDE:

ESPAsyncWebServer
AsyncTCP
สามารถติดตั้งผ่าน GitHub หรือลากโฟลเดอร์ไปไว้ใน libraries/

Q4: ESPAsyncWebServer ใช้กับ ESP8266 ได้ไหม?

A: ได้ครับ แต่ต้องใช้เวอร์ชันที่เขียนแยกต่างหาก (ESPAsyncWebServer สำหรับ ESP8266 + ESPAsyncTCP)
บทความนี้เน้นเฉพาะการใช้งานกับ ESP32

Q5: ต้องใช้ Internet หรือ Cloud ไหม?

A: ไม่ต้องครับ ESPAsyncWebServer ใช้งานใน Local Network ได้เลย ไม่ต้องพึ่ง Cloud หรือ Internet เหมาะกับฟาร์ม หรือบ้านที่ไม่มีเน็ต