Esp32 การแสดงผล HTML ในหน้าเว็บ

ESP32 เป็นไมโครคอนโทรลเลอร์ขนาดเล็กแต่ทรงพลัง ที่ได้รับความนิยมอย่างมากในวงการ IoT (Internet of Things)

และการพัฒนาอุปกรณ์อิเล็กทรอนิกส์ต่างๆ เนื่องจากมีราคาไม่แพง มีฟังก์ชันครบครัน และใช้งานง่าย

ทำให้สามารถนำไปประยุกต์ใช้ ได้หลากหลาย

1.การติดตั้ง ESP32 ใน Arduino IDE

ทำตามขั้นตอนได้ดังนี้:

Arduino IDE ไปที่ File > Preferences จากนั้นในช่อง "Additional Board Manager URLs"

ให้เพิ่ม URL ของ ESP32: https://dl.espressif.com/dl/package_esp32_index.json

ติดตั้ง ESP32 Board: ไปที่ Tools > Board > Boards Manager

ค้นหา “ESP32” และติดตั้งแพ็คเกจ ESP32 โดย Espressif Systems

เลือกบอร์ด ESP32: ไปที่ Tools > Board และเลือกบอร์ด ESP32 ที่คุณใช้งาน

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

2. เรียกใช้ ส่วนหัวโปรแกรม

#include "WiFi.h"

const char* ssid = "Nui 2.4G";

const char* password = "0895515998";

Mode ในการเชื่อมต่อ

2.1 Station Mode:WiFi.mode(WIFI_STA)

2.2 Access Point Mode:WiFi.mode(WIFI_AP)

2.3 Access point and Hotspot Mode:WiFi.mode(WIFI_AP_STA)

ค่า RSSI คืออะไรและมีความสำคัญอย่างไร?

RSSI (Received Signal Strength Indicator): เป็นค่าที่แสดงถึงความแรงของสัญญาณที่ได้รับ

โดยวัดเป็นหน่วย dBm (decibel-milliwatts)

ค่าที่ได้จะเป็นจำนวนลบ: ค่า RSSI ที่มีค่าน้อย (ค่าลบมาก) หมายถึงสัญญาณมีความแรงสูง และมีความเสถียรมากขึ้น

ใช้ประโยชน์: ค่า RSSI สามารถนำไปใช้ในการตรวจสอบคุณภาพของการเชื่อมต่อ Wi-Fi, ตรวจสอบตำแหน่งของอุปกรณ์

หรือใช้ในการตัดสินใจเกี่ยวกับการเชื่อมต่อกับเครือข่าย Wi-Fi ที่มีความเหมาะสมที่สุด

3. การแสดงผล HTML ในหน้าเว็บ

3.1 ติดตั้ง library ESPAsyncWebServer by dvarrel

3.2 ติดตั้ง library AsyncTCP by dvarrel

การติดตั้ง libraly ที่จำเป็นต้องใช้

ดาว์นโหลด ESPAsyncWebServer libraly

- https://github.com/me-no-dev/ESPAsyncWebServer

- Unzip and Rename ESPAsyncWebServer

- เก็บใน Arduino IDE libraries folder

หรือใช้วิธี Sketch > Include Library > Add .ZIP library เลือก zip ไฟล์ที่ดาว์นโหลดมา

- ดาว์นโหลด ESPAsyncTCP-master libraly

-https://github.com/me-no-dev/ESPAsyncWebServer

- Unzip Rename ESPAsyncTCP

- เก็บใน Arduino IDE libraries folder

หรือใช้วิธี Sketch > Include Library > Add .ZIP library เลือก zip ไฟล์ที่ดาว์นโหลดมา

แบบเดียวกับด้านบน

- ติดตั้ง library AsyncTCP

// Full code

#include <WiFi.h>

#include <ESPAsyncWebServer.h>

const char* ssid = "Nui 2.4G"; // CHANGE IT

const char* password = "0895515998"; // CHANGE IT

AsyncWebServer server(80);

void setup() {

Serial.begin(115200);

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi...");

}

Serial.println("Connected to WiFi");

// Print the ESP32's IP address

Serial.print("ESP32 Web Server's IP address: ");

Serial.println(WiFi.localIP());

// Define a route to serve the HTML page

server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {

Serial.println("ESP32 Web Server: New request received:"); // for debugging

request->send(200, "text/html", "<html><body><h1>Hello, ESP32!</h1></body></html>");

});

// Start the server

server.begin();

}

void loop(){}

///////////////////

server.on("/page1", HTTP_GET, [](AsyncWebServerRequest *request){

request->send(200, "text/plain", "<h1>Hello Page 1</h1>");

});

4.1 AsyncWebServer server(80);

AsyncWebServer เป็นคลาสในภาษา Java ที่ถูกออกแบบมาเพื่อใช้ในการสร้างเว็บเซิร์ฟเวอร์ที่ทำงานแบบ

asynchronous หรือไม่รอคอย นั่นหมายความว่าเซิร์ฟเวอร์สามารถรับและประมวลผลคำขอจากผู้ใช้หลาย ๆ

รายได้พร้อมกัน โดยไม่ต้องรอให้คำขอหนึ่งเสร็จสิ้นก่อนจึงจะไปทำคำขออื่น ทำให้เซิร์ฟเวอร์มีประสิทธิภาพสูง

และสามารถรองรับการใช้งานที่มากขึ้น

ทำไมต้อง AsyncWebServer?

ประสิทธิภาพ: การทำงานแบบ asynchronous ช่วยให้เซิร์ฟเวอร์สามารถใช้ทรัพยากรที่มีอยู่

ได้อย่างมีประสิทธิภาพสูงสุด โดยเฉพาะอย่างยิ่งในกรณีที่ต้องรอการตอบสนองจากระบบอื่น ๆ

เช่น ฐานข้อมูล หรือบริการภายนอก

ความสามารถในการรองรับผู้ใช้จำนวนมาก: ด้วยการทำงานแบบไม่รอคอย เซิร์ฟเวอร์สามารถรองรับการเชื่อมต่อจากผู้ใช้

จำนวนมากได้พร้อมกัน โดยไม่ทำให้ประสิทธิภาพของระบบลดลง

ประสบการณ์ผู้ใช้ที่ดีขึ้น: การตอบสนองที่รวดเร็ว ทำให้ผู้ใช้ได้รับประสบการณ์ การใช้งานที่ราบรื่นและไม่ติดขัด

การทำงานพื้นฐานของ AsyncWebServer

รับคำขอ: เมื่อมีคำขอเข้ามาที่เซิร์ฟเวอร์ คำขอจะถูกนำไปประมวลผลโดย thread แยกต่างหาก

ประมวลผลคำขอ: ในขณะที่ thread หนึ่งกำลังประมวลผลคำขออยู่ thread อื่น ๆ

ก็สามารถรับและประมวลผลคำขออื่น ๆ ได้ต่อไป

ส่งคำตอบ: เมื่อการประมวลผลคำขอเสร็จสิ้น เซิร์ฟเวอร์จะส่งคำตอบกลับไปยังผู้ใช้

การใช้งาน AsyncWebServer

การใช้งาน AsyncWebServer จะแตกต่างกันไปขึ้นอยู่กับ framework หรือ library ที่คุณเลือกใช้ ตัวอย่างเช่น:

Vert.x: เป็น framework ที่เน้นการทำงานแบบ asynchronous และ reactive programming

ซึ่งมีการสนับสนุนการสร้าง web server ที่ทำงานแบบ asynchronous อย่างดี

Netty: เป็น asynchronous event-driven network application framework

ที่มักถูกนำมาใช้ในการสร้าง high-performance protocol servers และ clients ซึ่งรวมถึง web server ด้วย

Spring WebFlux: เป็นส่วนหนึ่งของ Spring Framework ที่ให้การสนับสนุนการสร้าง

reactive web applications โดยใช้ reactive streams

ข้อดีของการใช้ AsyncWebServer

ประสิทธิภาพสูง: เหมาะสำหรับแอปพลิเคชันที่ต้องการประมวลผลคำขอจำนวนมากและต้องการตอบสนองต่อผู้ใช้ได้อย่างรวดเร็ว

รองรับการใช้งานที่หลากหลาย: สามารถใช้ในการสร้างแอปพลิเคชันประเภทต่าง ๆ ได้ เช่น REST API, WebSocket,

และ real-time applications

ง่ายต่อการขยาย: สามารถปรับขนาดเซิร์ฟเวอร์ให้รองรับการใช้งานที่เพิ่มขึ้นได้อย่างง่ายดาย

Referrence:

https://projecthub.arduino.cc/cetech11/implementing-web-server-on-esp32-5c24be

การใช้งาน คลาส AsyncWebServer

https://www.dfrobot.com/blog-813.html

Tags:

ESP32,Arduio IDE,NodeMCU,handleRoot,HTML,AsyncWebServer server(80),

Web server,handleClient,server send,server on,WiFi.begin ,WiFi.h

ช่องลาเลอ

ค้นหาบล็อกนี้

Esp32 การแสดงผล HTML ในหน้าเว็บ

ความคิดเห็น

แสดงความคิดเห็น