SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP32 - Ethernet

ESP32 - GPIO Interrupt

Tham khảo API cho Thư viện WebApps ESP32 DIYables Tài liệu đầy đủ

Tổng quan

Thư viện ESP32 WebApps của DIYables cung cấp một giải pháp toàn diện mô-đun để tạo các ứng dụng web dựa trên WebSocket trên ESP32. Nó bao gồm nhiều ứng dụng web được xây sẵn và một khung linh hoạt để tạo các ứng dụng tùy chỉnh.

Thư viện sử dụng kiến trúc mô-đun, cho phép bạn chỉ bao gồm các ứng dụng web bạn cần, giúp tiết kiệm bộ nhớ và cải thiện hiệu suất.

Tính năng

Kiến trúc mô-đun: Chỉ thêm các ứng dụng web bạn cần để tối ưu hóa việc sử dụng bộ nhớ
Tiết kiệm bộ nhớ: Mỗi ứng dụng web có thể được bật/tắt độc lập
11+ Ứng dụng web sẵn sàng sử dụng: Điều khiển ESP32 hoàn chỉnh mà không cần kiến thức lập trình web
Khung ứng dụng web tùy chỉnh: Tạo ứng dụng của riêng bạn bằng hệ thống lớp cơ sở
Giao tiếp thời gian thực: Dựa trên WebSocket để cập nhật tức thì
Thiết kế đáp ứng: Hoạt động trên máy tính để bàn, máy tính bảng và thiết bị di động
Tích hợp dễ dàng: API dựa trên callback đơn giản
Hỗ trợ nhiều ứng dụng: Hỗ trợ thêm nhiều ứng dụng web đồng thời

Các lớp cốt lõi

Máy chủ Ứng dụng Web DIYables

Lớp máy chủ chính quản lý các ứng dụng web, các yêu cầu HTTP và giao tiếp WebSocket.

Phương thức khởi tạo

DIYablesWebAppServer(int httpPort = 80, int websocketPort = 81)

Tạo một phiên bản máy chủ ứng dụng web.

httpPort: cổng máy chủ HTTP (mặc định: 80)
websocketPort: cổng máy chủ WebSocket (mặc định: 81)

Phương pháp

Cài đặt và kết nối

bool begin()

Khởi tạo kết nối mạng (cho Ethernet hoặc các kết nối được cấu hình sẵn) và khởi động máy chủ web.

Trả về: true nếu thành công, false nếu thất bại
Trường hợp sử dụng: Để hỗ trợ Ethernet trong tương lai hoặc khi thông tin xác thực WiFi đã được cấu hình trước

bool begin(const char* ssid, const char* password)

Khởi tạo kết nối WiFi và khởi động máy chủ web.

ssid: tên mạng WiFi
password: mật khẩu WiFi
Returns: true nếu thành công, false nếu thất bại
Use case: Kết nối WiFi tiêu chuẩn với thông tin xác thực

void loop()

Xử lý các yêu cầu HTTP và giao tiếp WebSocket. Phải được gọi trong vòng lặp chính.

bool isConnected()

Trả về true nếu WiFi được kết nối.

String getIPAddress()

Trả về địa chỉ IP của Arduino dưới dạng chuỗi.

Quản lý ứng dụng

void addApp(DIYablesWebAppPageBase* app)

Thêm một ứng dụng web vào máy chủ.

ứng dụng: Con trỏ tới một thể hiện của ứng dụng web

void removeApp(const String& path)

Xóa một ứng dụng web theo đường dẫn URL của nó.

đường dẫn: đường dẫn URL của ứng dụng (ví dụ, "/chat")

DIYablesWebAppPageBase* getApp(const String& path)

Lấy một ứng dụng web theo đường dẫn URL của nó.

path: Đường dẫn URL của ứng dụng
Trả về: Con trỏ tới ứng dụng hoặc nullptr nếu không tìm thấy

void setNotFoundPage(const DIYablesNotFoundPage& page)

Thiết lập trang 404 Không tìm thấy (tùy chọn).

trang: phiên bản trang 404

Truy cập ứng dụng chuyên dụng

DIYablesWebDigitalPinsPage* getWebDigitalPinsPage()

Lấy thể hiện trang các chân số kỹ thuật số nếu đã được thêm.

Trả về: Con trỏ tới trang các chân kỹ thuật số hoặc nullptr

DIYablesWebSliderPage* getWebSliderPage()

Lấy thể hiện trang slider nếu được thêm.

Trả về: Con trỏ tới trang trượt hoặc nullptr

DIYablesWebJoystickPage* getWebJoystickPage()

Lấy thể hiện của trang joystick khi được thêm.

Trả về: Con trỏ tới trang joystick hoặc nullptr

Các Lớp Cơ Sở

DIYablesWebAppPageBase

Lớp cơ sở trừu tượng mà mọi ứng dụng web kế thừa từ nó. Cung cấp chức năng chung cho xử lý HTTP, giao tiếp WebSocket và quản lý trang.

Hàm tạo

DIYablesWebAppPageBase(const String& pagePath)

Tạo một đối tượng trang cơ sở với đường dẫn URL được chỉ định.

pagePath: đường dẫn URL cho trang (ví dụ, "/web-joystick")

Phương thức ảo (Phải được triển khai bởi các lớp dẫn xuất)

virtual void handleHTTPRequest(IWebClient& client) = 0

Xử lý các yêu cầu HTTP cho trang này. Phương thức ảo thuần túy.

máy khách: Giao diện máy khách web để gửi phản hồi

virtual void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) = 0

Xử lý các tin nhắn WebSocket cho trang này. Phương thức ảo thuần túy.

ws: giao diện kết nối WebSocket
message: nội dung tin nhắn nhận được
length: độ dài tin nhắn

virtual const char* getPageInfo() const = 0

Trả về chuỗi nhận diện trang được sử dụng trong hiển thị thông tin kết nối. Hàm ảo thuần.

Trả về: Chuỗi thông tin trang (ví dụ: "🕹️ Web Joystick: ")

virtual String getNavigationInfo() const = 0

Trả về HTML cho nút điều hướng trang chủ. Phương thức ảo thuần túy.

Trả về: chuỗi HTML cho thẻ điều hướng

Các phương thức ảo (Ghi đè tùy chọn)

virtual void onWebSocketConnection(IWebSocket& ws)

Được gọi khi một kết nối WebSocket mới được thiết lập.

ws: Kết nối WebSocket mới

virtual void onWebSocketClose(IWebSocket& ws)

Được gọi khi kết nối WebSocket bị đóng.

ws: Kết nối WebSocket đã đóng

Các phương pháp phổ biến

const char* getPagePath() const

Lấy đường dẫn URL cho trang này.

Trả về: Chuỗi đường dẫn trang

bool isEnabled() const

Kiểm tra xem trang có đang được kích hoạt hay không.

Trả về: true nếu được bật, false nếu được tắt

void setEnabled(bool enable)

Kích hoạt hoặc vô hiệu hóa trang.

kích hoạt: true để kích hoạt, false để vô hiệu hóa

Các phương thức tiện ích

void sendHTTPHeader(IWebClient& client, const char* contentType = "text/html")

Gửi các tiêu đề HTTP chuẩn cho máy khách.

client: Giao diện khách hàng Web
contentType: Kiểu MIME (mặc định: "text/html")

void sendWebSocketMessage(IWebSocket& ws, const char* message)

Gửi một tin nhắn đến một máy khách WebSocket cụ thể.

ws: Kết nối WebSocket đích
message: Tin nhắn cần gửi

void broadcastToAllClients(const char* message)

Phát một tin nhắn tới tất cả các máy khách WebSocket đã kết nối.

Thông điệp: Thông điệp để phát sóng

void sendLargeHTML(IWebClient& client, const char* html)

Gửi nội dung HTML lớn bằng cách sử dụng mã truyền tải chunked.

máy khách: Giao diện máy khách web
html: Nội dung HTML cần gửi

Ví dụ về cách sử dụng

class CustomPage : public DIYablesWebAppPageBase { public: CustomPage() : DIYablesWebAppPageBase("/custom") {} void handleHTTPRequest(IWebClient& client) override { sendHTTPHeader(client); client.println("<html><body>Custom Page</body></html>"); } void handleWebSocketMessage(IWebSocket& ws, const char* message, uint16_t length) override { // Handle WebSocket messages sendWebSocketMessage(ws, "Response: " + String(message)); } const char* getPageInfo() const override { return " 🔧 Custom Page: "; } String getNavigationInfo() const override { return "<a href=\"/custom\" class=\"app-card custom\">" "<h3>🔧 Custom</h3><p>Custom functionality</p></a>"; } };

Các Lớp Ứng dụng Web

Trang chủ DIYables

Trung tâm điều hướng cung cấp liên kết đến tất cả các ứng dụng được kích hoạt.

Hàm khởi tạo

DIYablesHomePage()

Đường dẫn URL

Đường dẫn: / (thư mục gốc)

Trang trò chuyện trên web DIYables

Giao diện trò chuyện tương tác cho giao tiếp hai chiều với Arduino.

Hàm khởi tạo

DIYablesWebChatPage()

Đường dẫn URL

Đường dẫn: /webchat

Các phương pháp

void onWebChatMessage(std::function<void(const String&)> callback)

Thiết lập callback cho các tin nhắn chat đến.

void sendToWebChat(const String& message)

Gửi một tin nhắn đến giao diện trò chuyện trên web.

Trang Giám Sát Web DIYables

Trình theo dõi nối tiếp dựa trên web cho đầu ra thời gian thực và nhập lệnh.

Hàm khởi tạo

DIYablesWebMonitorPage()

Đường dẫn URL

Đường dẫn: /webmonitor

Các phương pháp

void onWebMonitorMessage(std::function<void(const String&)> callback)

Thiết lập hàm gọi lại cho các thông điệp giám sát đến.

void sendToWebMonitor(const String& message)

Gửi một tin nhắn tới giao diện giám sát trên web.

DIYablesWeb Trang Chân Số Kỹ Thuật Số

Điều khiển và giám sát các chân số 0–13 thông qua giao diện web.

Hàm khởi tạo

DIYablesWebDigitalPinsPage()

Đường dẫn URL

Đường dẫn: /webdigitalpins

Phương pháp

void enablePin(int pin, int mode)

Kích hoạt mã PIN cho điều khiển qua web.

pin: Số chân (0-13)
mode: WEB_PIN_OUTPUT hoặc WEB_PIN_INPUT

void onPinWrite(std::function<void(int, int)> callback)

Thiết lập hàm gọi lại cho các thao tác ghi vào các chân đầu ra.

void onPinRead(std::function<int(int)> callback)

Thiết lập hàm gọi lại cho các thao tác đọc pin (pin đầu vào).

void onPinModeChange(std::function<void(int, int)> callback)

Thiết lập hàm gọi lại cho sự thay đổi chế độ của các chân.

void updatePinState(int pin, int state)

Cập nhật trạng thái ghim theo thời gian thực cho trình duyệt web.

DIYablesWebSliderPage

Bộ điều khiển trượt đôi cho các ứng dụng analog/PWM.

Hàm khởi tạo

DIYablesWebSliderPage()

Đường dẫn URL

Đường dẫn: /webslider

Các phương pháp

void onSliderValueFromWeb(std::function<void(int, int)> callback)

Thiết lập hàm gọi lại cho các thay đổi giá trị của thanh trượt từ web.

Thông số: thanh trượt 1 (0-255), thanh trượt 2 (0-255)

void onSliderValueToWeb(std::function<void()> callback)

Thiết lập hàm gọi lại cho máy khách web đang yêu cầu các giá trị hiện tại.

void sendToWebSlider(int slider1, int slider2)

Gửi các giá trị thanh trượt tới giao diện web.

Trang Joystick Web của DIYables

Điều khiển joystick 2D cho robotics và các ứng dụng định vị.

Hàm khởi tạo

DIYablesWebJoystickPage(bool autoReturn = true, float sensitivity = 10.0)

autoReturn: Joystick có quay về vị trí trung tâm tự động hay không
sensitivity: Phần trăm di chuyển tối thiểu để kích hoạt cập nhật

Đường dẫn URL

Đường dẫn: /webjoystick

Phương pháp

void onJoystickValueFromWeb(std::function<void(int, int)> callback)

Thiết lập hàm gọi lại cho sự di chuyển của joystick từ web.

Tham số: x (-100 đến 100), y (-100 đến 100)

void onJoystickValueToWeb(std::function<void()> callback)

Thiết lập hàm gọi lại cho máy khách web đang yêu cầu vị trí hiện tại.

void sendToWebJoystick(int x, int y)

Gửi vị trí của joystick đến giao diện web.

void setAutoReturn(bool autoReturn)

Thiết lập hành vi tự động trả về.

void setSensitivity(float sensitivity)

Thiết lập độ nhạy di chuyển (phần trăm).

Trang Plotter Web DIYables

Trực quan hóa dữ liệu thời gian thực với hỗ trợ nhiều chuỗi dữ liệu.

Hàm khởi tạo

DIYablesWebPlotterPage()

Đường dẫn URL

Đường dẫn: /webplotter

Phương pháp

void setPlotTitle(const String& title)

Đặt tiêu đề cho đồ thị.

void setAxisLabels(const String& xLabel, const String& yLabel)

Đặt nhãn cho trục.

void enableAutoScale(bool enable)

Bật hoặc tắt tự động căn chỉnh thang đo của trục Y.

void setMaxSamples(int maxSamples)

Thiết lập số lượng điểm dữ liệu tối đa để hiển thị.

void addDataPoint(const String& seriesName, float x, float y)

Thêm một điểm dữ liệu vào một dãy dữ liệu.

void clearPlot()

Xóa tất cả dữ liệu khỏi đồ thị.

DIYablesNotFoundPage

Trang lỗi 404 tùy chọn để cải thiện trải nghiệm người dùng.

Hàm khởi tạo

DIYablesNotFoundPage()

Ví dụ về cách sử dụng cơ bản

#include <DIYablesWebApps.h> // WiFi credentials const char* ssid = "YOUR_WIFI_SSID"; const char* password = "YOUR_WIFI_PASSWORD"; // Create server and web applications DIYablesWebAppServer webAppsServer(80, 81); DIYablesHomePage homePage; DIYablesWebChatPage chatPage; DIYablesWebMonitorPage monitorPage; void setup() { Serial.begin(9600); // Add only the applications you need webAppsServer.addApp(&homePage); webAppsServer.addApp(&chatPage); webAppsServer.addApp(&monitorPage); // Optional: Add 404 page webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Start server if (webAppsServer.begin(ssid, password)) { Serial.println("Server started successfully"); Serial.print("IP: "); Serial.println(webAppsServer.getIPAddress()); } // Setup callbacks chatPage.onWebChatMessage([](const String& message) { Serial.println("Chat: " + message); chatPage.sendToWebChat("Arduino received: " + message); }); } void loop() { webAppsServer.loop(); delay(10); }

Tổng quan về các ứng dụng web

Trang chủ

Địa chỉ URL: http://[esp32-ip]/
Mục đích: Trung tâm điều hướng chính
Tính năng: Liên kết tới tất cả các ứng dụng được kích hoạt, trạng thái kết nối

Ứng dụng WebChat

URL: http://[esp32-ip]/webchat
Mục đích: Giao diện giao tiếp hai chiều
Tính năng: Nhắn tin thời gian thực, lịch sử tin nhắn, trạng thái WebSocket

Giám sát Web

URL: http://[esp32-ip]/webmonitor
Mục đích: Thay thế trình theo dõi nối tiếp
Tính năng: Đầu ra nối tiếp theo thời gian thực, nhập lệnh, giao diện tối

Điều khiển các chân kỹ thuật số trên Web

Địa chỉ URL: http://[esp32-ip]/webdigitalpins
Mục đích: Điều khiển các chân GPIO từ 0-13
Tính năng: Điều khiển từng chân riêng lẻ, thao tác hàng loạt, trạng thái thời gian thực

Điều khiển thanh trượt Web

URL: http://[esp32-ip]/webslider
Mục đích: Điều khiển analog/PWM hai kênh độc lập
Tính năng: Hai thanh trượt độc lập (0-255), giá trị thiết lập trước, phản hồi thời gian thực

Điều khiển Joystick Web

Địa chỉ URL: http://[esp32-ip]/webjoystick
Mục đích: Điều khiển vị trí 2D cho robot và phương tiện
Tính năng: Điều khiển bằng cảm ứng/chuột, hiển thị tọa độ, điều chỉnh độ nhạy

Máy vẽ đồ thị trên web

URL: http://[esp32-ip]/webplotter
Mục đích: Trực quan hóa dữ liệu thời gian thực
Tính năng: Nhiều chuỗi dữ liệu, tự động điều chỉnh quy mô, tiêu đề và trục có thể cấu hình

Giao tiếp WebSocket

Tất cả các ứng dụng sử dụng WebSocket trên cổng 81 để truyền thông thời gian thực:

URL WebSocket: ws://[esp32-ip]:81
Kết nối: Tự động kết nối lại khi mất kết nối
Giao thức: Định dạng tin nhắn dựa trên văn bản

Định dạng tin nhắn

Tin nhắn WebChat

Từ Web: Tin nhắn văn bản trực tiếp
Đến Web: Tin nhắn văn bản trực tiếp

Các thông điệp Giám sát Web

Từ Web: Tin nhắn văn bản trực tiếp
Đến Web: Tin nhắn văn bản trực tiếp

Tin nhắn PIN kỹ thuật số trên Web

Từ Web: Định dạng JSON: {"pin": 13, "state": 1}
Đến Web: Định dạng JSON: {"pin": 13, "state": 1}

Các thông điệp của Web Slider

Từ Web: Định dạng JSON: {"slider1": 128, "slider2": 255}
Đến Web: Định dạng JSON: {"slider1": 128, "slider2": 255}

Tin nhắn Joystick trên Web

Từ Web: Định dạng JSON: {"x": 50, "y": -25}
Đến Web: Định dạng JSON: {"x": 50, "y": -25}

Thông báo của Web Plotter

Từ Web: Không áp dụng (chỉ hiển thị)
Đến Web: Định dạng JSON: {"series": "temp", "x": 10.5, "y": 23.4}

Xử lý lỗi

Thư viện bao gồm xử lý lỗi tự động cho:

Lỗi kết nối Wi‑Fi
Ngắt kết nối WebSocket
Các định dạng tin nhắn không hợp lệ
Giới hạn kết nối của máy khách

Sử dụng bộ nhớ

Lợi ích của Kiến trúc mô-đun: Chỉ bao gồm các ứng dụng web bạn cần để tối ưu hóa việc sử dụng bộ nhớ.

Dung lượng bộ nhớ ước tính cho mỗi thành phần:

DIYablesWebAppServer: ~8KB bộ nhớ Flash, ~2KB RAM
DIYablesHomePage: ~3KB bộ nhớ Flash, ~1KB RAM
DIYablesWebChatPage: ~6KB bộ nhớ Flash, ~1.5KB RAM
DIYablesWebMonitorPage: ~5KB bộ nhớ Flash, ~1.5KB RAM
DIYablesWebDigitalPinsPage: ~8KB bộ nhớ Flash, ~2KB RAM
DIYablesWebSliderPage: ~6KB bộ nhớ Flash, ~1.5KB RAM
DIYablesWebJoystickPage: ~7KB bộ nhớ Flash, ~1.5KB RAM
DIYablesWebPlotterPage: ~10KB bộ nhớ Flash, ~2KB RAM
Bộ đệm WebSocket: ~1KB RAM cho mỗi kết nối

Tổng khi bật tất cả các ứng dụng: ~53KB Flash, ~12KB RAM

Cài đặt tối thiểu (máy chủ + hệ thống gia đình + 1 ứng dụng): ~17KB bộ nhớ Flash, ~4.5KB RAM

Khả năng tương thích trình duyệt

Các trình duyệt được hỗ trợ:

Chrome 50+
Firefox 45+
Safari 10+
Edge 79+
Trình duyệt di động (iOS Safari, Chrome Mobile)

Ghi chú bảo mật

Chưa triển khai xác thực (chỉ phù hợp cho mạng nội bộ)
Chỉ sử dụng trên các mạng được tin cậy
Xem xét bổ sung xác thực cho các triển khai công khai

Khắc phục sự cố

Các vấn đề phổ biến

Không thể kết nối WiFi

Kiểm tra SSID và mật khẩu
Kiểm tra xem mạng có tần số 2.4GHz (không phải 5GHz)
Kiểm tra cường độ tín hiệu

Kết nối WebSocket thất bại

Xác minh địa chỉ IP có đúng không
Kiểm tra thiết lập tường lửa
Thử trình duyệt khác

Sử dụng bộ nhớ cao

Vô hiệu hóa các ứng dụng không sử dụng
Giới hạn số kết nối đồng thời
Khởi động lại ESP32 nếu xảy ra phân mảnh bộ nhớ

Phản hồi chậm

Kiểm tra cường độ tín hiệu WiFi
Giảm tần suất tin nhắn WebSocket
Sử dụng các hàm gọi lại ngắn hơn

Các dự án ví dụ

Các ứng dụng ví dụ

Thư viện ESP32 WebApps của DIYables bao gồm các ví dụ toàn diện được thiết kế cho ESP32 trên nền tảng giáo dục ESP32:

Các ví dụ có sẵn

Ví dụ Chat: Giao diện giao tiếp hai chiều
Ví dụ WebMonitor: Thay thế màn hình Serial bằng các tính năng được cải tiến
Ví dụ WebDigitalPins: Điều khiển tất cả các chân kỹ thuật số với phản hồi trực quan
Ví dụ WebSlider: Điều khiển song song analog/PWM với các preset
Ví dụ WebJoystick: Điều khiển vị trí 2D cho các dự án robot
Ví dụ MultipleWebApps: Tất cả các ứng dụng đang chạy đồng thời

Xem thư mục examples/ để có các dự án hoàn chỉnh và thư mục docs/ để có hướng dẫn cài đặt chi tiết.

Giao diện trừu tượng nền tảng

Thư viện DIYables ESP32 WebApps sử dụng một lớp trừu tượng hóa nền tảng với các giao diện cho phép hỗ trợ nhiều nền tảng phần cứng. Các giao diện này tách chức năng cốt lõi của WebApp khỏi các triển khai dành cho nền tảng cụ thể.

Các giao diện cốt lõi

IWebClient

Giao diện cho các kết nối máy khách HTTP.

class IWebClient { public: virtual ~IWebClient() = default; // Stream interface methods virtual int available() = 0; virtual int read() = 0; virtual int peek() = 0; virtual size_t write(uint8_t data) = 0; virtual size_t write(const uint8_t* buffer, size_t size) = 0; virtual void flush() = 0; // Connection management virtual bool connected() = 0; virtual void stop() = 0; // Convenience methods virtual void print(const String& str) = 0; virtual void println(const String& str) = 0; };

IWebSocket

Giao diện cho kết nối WebSocket với khả năng giao tiếp hai chiều.

class IWebSocket { public: enum DataType { TEXT = 1, BINARY = 2 }; enum CloseCode { NORMAL_CLOSURE = 1000, GOING_AWAY = 1001, PROTOCOL_ERROR = 1002, UNSUPPORTED_DATA = 1003, POLICY_VIOLATION = 1008, MESSAGE_TOO_BIG = 1009, INTERNAL_ERROR = 1011 }; virtual ~IWebSocket() = default; // Message handling virtual void sendText(const char* message) = 0; virtual void sendBinary(const uint8_t* data, size_t length) = 0; virtual bool isConnected() const = 0; virtual void close(CloseCode code = NORMAL_CLOSURE, const char* reason = nullptr) = 0; // Event callbacks virtual void onMessage(std::function<void(IWebSocket*, DataType, const char*, uint16_t)> callback) = 0; virtual void onClose(std::function<void(IWebSocket*, CloseCode, const char*, uint16_t)> callback) = 0; };

IWebServer

Giao diện cho chức năng của máy chủ HTTP.

class IWebServer { public: virtual ~IWebServer() = default; // Server lifecycle virtual bool begin() = 0; virtual void stop() = 0; virtual IWebClient* available() = 0; // Configuration virtual void setPort(uint16_t port) = 0; virtual uint16_t getPort() const = 0; };

Giao diện IWebSocketServer

Giao diện cho máy chủ WebSocket với quản lý kết nối.

class IWebSocketServer { public: using ConnectionCallback = std::function<void(IWebSocket*)>; using MessageCallback = std::function<void(IWebSocket*, IWebSocket::DataType, const char*, uint16_t)>; virtual ~IWebSocketServer() = default; // Server lifecycle virtual bool begin() = 0; virtual void stop() = 0; virtual void listen() = 0; // Event handling virtual void onConnection(ConnectionCallback callback) = 0; virtual void onMessage(MessageCallback callback) = 0; // Broadcasting virtual void broadcastText(const char* message) = 0; virtual void broadcastBinary(const uint8_t* data, size_t length) = 0; // Configuration virtual void setPort(uint16_t port) = 0; virtual uint16_t getPort() const = 0; };

Nhà cung cấp mạng

Giao diện quản lý kết nối mạng.

class INetworkProvider { public: virtual ~INetworkProvider() = default; // Network lifecycle virtual bool begin(const char* ssid, const char* password) = 0; virtual void end() = 0; virtual bool isConnected() = 0; // Network information virtual String getLocalIP() = 0; virtual String getSSID() = 0; virtual int32_t getRSSI() = 0; };

IServerFactory

Giao diện nhà máy để tạo các triển khai dành cho nền tảng cụ thể.

class IServerFactory { public: virtual ~IServerFactory() = default; // Factory methods virtual INetworkProvider* createNetworkProvider() = 0; virtual IWebServer* createWebServer(uint16_t port) = 0; virtual IWebSocketServer* createWebSocketServer(uint16_t port) = 0; // Platform information virtual String getPlatformName() const = 0; };

Ví dụ triển khai nền tảng

Đối với ESP32, các giao diện được triển khai bằng thư viện DIYables_ESP32_WebServer:

class ESP32ServerFactory : public IServerFactory { public: INetworkProvider* createNetworkProvider() override { return new ESP32NetworkProvider(); } IWebServer* createWebServer(uint16_t port) override { return new ESP32WebServer(port); } IWebSocketServer* createWebSocketServer(uint16_t port) override { return new ESP32WebSocketServer(port); } String getPlatformName() const override { return "ESP32"; } };

Thêm hỗ trợ cho nền tảng mới

Để thêm hỗ trợ cho một nền tảng mới (ví dụ: ESP32):

Triển khai toàn bộ các giao diện cho nền tảng mục tiêu
Tạo một ServerFactory để khởi tạo các triển khai của bạn
Xử lý mạng đặc thù nền tảng và các giao thức WebSocket
Kiểm tra với các lớp WebApp hiện có (không cần thay đổi)

Ví dụ cách sử dụng với các nền tảng khác:

ESP32ServerFactory factory; DIYablesWebAppServer server(factory, 80, 81); // ESP32 (hypothetical) ESP32ServerFactory esp32Factory; DIYablesWebAppServer esp32Server(esp32Factory, 80, 81);

Lợi ích của thiết kế dựa trên giao diện

Tính độc lập với nền tảng: Logic lõi của WebApp hoạt động trên mọi nền tảng.
Khả năng mở rộng: Dễ thêm hỗ trợ phần cứng mới.
Khả năng bảo trì: Mã nguồn theo nền tảng được cô lập.
Khả năng kiểm thử: Các giao diện có thể được giả lập cho kiểm thử đơn vị.
Tính nhất quán: API giống nhau trên mọi nền tảng được hỗ trợ.

Hỗ trợ nền tảng hiện tại

✅ ESP32: Đã triển khai đầy đủ và được kiểm tra
🔄 ESP32: Có sẵn dưới dạng phần mở rộng riêng - DIYables_WebApps_ESP32
🚀 Nền tảng tương lai: Có thể được thêm bằng cùng mẫu giao diện