เว็บเซิร์ฟเวอร์ ESP32 โดยใช้ Arduino IDE

ในบทความ ESP32 นี้ เราจะสำรวจวิธีที่เราสามารถเชื่อมต่อบอร์ด ESP32 กับจุดเข้าใช้งานและออกแบบเว็บเซิร์ฟเวอร์ได้ เมื่อใช้เว็บเซิร์ฟเวอร์นั้น เราจะควบคุม LED และเครื่องใช้ไฟฟ้า AC ด้วยความช่วยเหลือของโมดูลรีเลย์

สารบัญ:

• เว็บเซิร์ฟเวอร์ ESP32
• วิธีสร้างเว็บเซิร์ฟเวอร์ ESP32 โดยใช้ Arduino IDE
• รหัสเว็บเซิร์ฟเวอร์ ESP32
• ที่อยู่ IP ของเว็บเซิร์ฟเวอร์ ESP32
• การควบคุมไฟ LED โดยใช้เว็บเซิร์ฟเวอร์ ESP32
• อินเทอร์เฟซเดสก์ท็อป
• อินเทอร์เฟซมือถือ
• การควบคุมอุปกรณ์ AC โดยใช้เว็บเซิร์ฟเวอร์ ESP32
• บทสรุป

1. เว็บเซิร์ฟเวอร์ ESP32

เว็บเซิร์ฟเวอร์มีโปรแกรมพิเศษที่สามารถประมวลผลและส่งหน้าเว็บไปยังเว็บไคลเอ็นต์ได้ ในการเปิดเว็บไซต์ เราใช้เว็บเบราว์เซอร์ เว็บเบราว์เซอร์นี้เรียกอีกอย่างว่าเว็บไคลเอ็นต์ เว็บไซต์ที่คุณต้องการดูจะถูกจัดเก็บไว้ในคอมพิวเตอร์เครื่องอื่นที่เรียกว่าเว็บเซิร์ฟเวอร์

ในการพูดคุยกัน เว็บเซิร์ฟเวอร์และเว็บไคลเอ็นต์จะใช้ภาษากลางที่เรียกว่า HTTP นี่คือวิธีการทำงาน: เว็บไคลเอ็นต์ถามเว็บเซิร์ฟเวอร์สำหรับเว็บเพจโดยใช้คำขอ HTTP เว็บเซิร์ฟเวอร์จะส่งหน้าเว็บที่ถูกร้องขอกลับมา หากไม่มีหน้าเว็บดังกล่าว คุณจะเห็นข้อความแสดงข้อผิดพลาด

ใน ESP32 เราสามารถออกแบบเว็บเซิร์ฟเวอร์ได้ เนื่องจาก ESP32 ไม่เพียงแต่สามารถเชื่อมต่อกับอุปกรณ์อื่น ๆ ผ่านเครือข่ายเท่านั้น แต่ยังสามารถสร้างเว็บเซิร์ฟเวอร์และตอบสนองต่อคำขอที่ได้รับได้อีกด้วย ทั้งหมดนี้เป็นไปได้เนื่องจาก ESP32 สามารถทำงานในสามโหมดที่แตกต่างกัน:

• สถานี
• จุดเชื่อมต่อ
• ทั้งสถานีและจุดเข้าใช้งาน

คุณสามารถดูบทความนี้เพื่อรับข้อมูลเชิงลึกเกี่ยวกับโหมดทั้งสามของ ESP32:

วิธีการตั้งค่าจุดเข้าใช้งาน ESP32 (AP) โดยใช้ Arduino IDE

2. วิธีสร้างเว็บเซิร์ฟเวอร์ ESP32 โดยใช้ Arduino IDE

หากต้องการสร้างเว็บเซิร์ฟเวอร์ ESP32 โดยใช้ Arduino IDE คุณสามารถเชื่อมต่อ ESP32 กับจุดเข้าใช้งานและสร้างที่อยู่ IP สำหรับเว็บเซิร์ฟเวอร์ได้ คุณสามารถใช้ HTML และ CSS เพื่อออกแบบอินเทอร์เฟซเซิร์ฟเวอร์ของคุณได้

เมื่อคุณเข้าใจว่าจุดเชื่อมต่อ ESP32 ทำงานแล้ว คุณสามารถออกแบบเว็บเซิร์ฟเวอร์ ESP32 ได้อย่างง่ายดายโดยใช้โค้ด Arduino IDE รหัสเว็บเซิร์ฟเวอร์ ESP32 ใช้ไลบรารี Wi-Fi ESP32 สิ่งนี้ทำให้งานของเราง่ายขึ้น เนื่องจากไลบรารีนี้มีฟังก์ชันสำคัญทั้งหมดที่จำเป็นสำหรับการเชื่อมต่อ ESP32 กับจุดเข้าใช้งาน

มาออกแบบเว็บเซิร์ฟเวอร์ ESP32 โดยใช้โค้ด Arduino IDE กันดีกว่า

3. รหัสเว็บเซิร์ฟเวอร์ ESP32

รหัสเว็บเซิร์ฟเวอร์ ESP32 เกี่ยวข้องกับการเชื่อมต่อ ESP32 กับจุดเข้าใช้งานและรับที่อยู่ IP สำหรับเซิร์ฟเวอร์ เมื่อคุณได้รับที่อยู่ IP แล้ว คุณจะต้องเชื่อมต่อกับเครือข่ายเดียวกันเพื่อเข้าถึงเว็บเซิร์ฟเวอร์ ESP32 จากนั้นคุณสามารถควบคุมไฟ LED และอุปกรณ์อื่นๆ ได้

เปิด Arduino IDE และเชื่อมต่อบอร์ด ESP32 ของคุณด้วย:

การติดตั้งบอร์ด ESP32 ใน Arduino IDE

เมื่อเชื่อมต่อบอร์ด ESP32 แล้ว ให้อัปโหลดโค้ดต่อไปนี้ไปยังบอร์ดของคุณ