SENSORS/ACTUATORS

INTERNET OF THING (IoT)

Arduino UNO R4 - Ethernet

Arduino UNO R4 - Email

Arduino WebRTC Example Hướng Dẫn Giao Diện Đồng Hồ Thời Gian Thực

Tổng Quan

Ví dụ WebRTC cung cấp giao diện đồng hồ thời gian thực toàn diện cho các dự án Arduino của bạn. Được thiết kế cho Arduino Uno R4 WiFi và nền tảng giáo dục DIYables STEM V4 IoT với khả năng RTC tích hợp, các tính năng quản lý thời gian nâng cao, và tích hợp liền mạch với hệ sinh thái giáo dục. Bạn có thể hiển thị thông tin đồng hồ thời gian thực, đồng bộ thời gian từ trình duyệt web đến Arduino, và theo dõi chênh lệch thời gian thông qua giao diện web trực quan.

Arduino webrtc example - hướng dẫn giao diện Đồng hồ thời gian thực

Tính Năng

Hiển Thị Đồng Hồ Thời Gian Thực: Hiển thị thời gian RTC Arduino hiện tại với cập nhật tự động
So Sánh Thời Gian Thiết Bị: Hiển thị thời gian trình duyệt web/thiết bị cùng với thời gian Arduino
Đồng Bộ Thời Gian Một Cú Nhấp: Đồng bộ RTC Arduino với thời gian trình duyệt web ngay lập tức
Chỉ Báo Chênh Lệch Thời Gian Trực Quan: Hiển thị độ lệch thời gian giữa các thiết bị bằng phút
Định Dạng Thời Gian Hai Dòng: Định dạng 12 giờ AM/PM với hiển thị ngày đầy đủ
Giao Diện Gradient Hiện Đại: Bố cục dạng thẻ với thiết kế responsive
Giao Tiếp WebSocket: Cập nhật song hướng thời gian thực mà không cần làm mới trang
Đồng Bộ Nhận Biết Múi Giờ: Sử dụng thời gian địa phương của thiết bị để đồng bộ chính xác
Giám Sát Trạng Thái Kết Nối: Chỉ báo trực quan cho trạng thái kết nối WebSocket
Yêu Cầu Thời Gian Tự Động: Yêu cầu thời gian Arduino hiện tại khi tải trang
Có Thể Mở Rộng Nền Tảng: Hiện tại được triển khai cho Arduino Uno R4 WiFi, nhưng có thể mở rộng cho các nền tảng phần cứng khác. Xem DIYables_WebApps_ESP32

Phần Cứng Cần Thiết

1	×	Arduino UNO R4 WiFi
1	×	Alternatively, DIYables STEM V4 IoT
1	×	(Tùy chọn) DIYables STEM V4 IoT
1	×	Cáp USB Type-C
1	×	(Khuyến nghị) Screw Terminal Block Shield for Arduino UNO R4
1	×	(Khuyến nghị) Breadboard Shield for Arduino UNO R4
1	×	(Khuyến nghị) Enclosure for Arduino UNO R4
1	×	(Khuyến nghị) Power Splitter for Arduino UNO R4
1	×	(Khuyến nghị) Prototyping Base Plate & Breadboard Kit for Arduino UNO

Or you can buy the following kits:

1	×	DIYables STEM V4 IoT Starter Kit (Arduino included)
1	×	DIYables Sensor Kit (30 sensors/displays)
1	×	DIYables Sensor Kit (18 sensors/displays)

Hướng Dẫn Cài Đặt

Các Bước Nhanh

Hãy thực hiện theo các hướng dẫn này từng bước:

Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4 WiFi/DIYables STEM V4 IoT, hãy tham khảo hướng dẫn Arduino UNO R4 - Cài Đặt Phần Mềm.
Kết nối bo mạch Arduino Uno R4/DIYables STEM V4 IoT với máy tính của bạn bằng cáp USB.
Khởi động Arduino IDE trên máy tính của bạn.
Chọn bo mạch Arduino Uno R4 thích hợp (ví dụ: Arduino Uno R4 WiFi) và cổng COM.
Điều hướng đến biểu tượng Libraries trên thanh bên trái của Arduino IDE.
Tìm kiếm "DIYables WebApps", sau đó tìm thư viện DIYables WebApps của DIYables
Nhấp nút Install để cài đặt thư viện.

Arduino UNO R4 diyables webapps thư viện

Bạn sẽ được yêu cầu cài đặt một số thư viện phụ thuộc khác
Nhấp nút Install All để cài đặt tất cả thư viện phụ thuộc.

Arduino UNO R4 diyables webapps dependency

Trên Arduino IDE, vào File Examples DIYables WebApps WebRTC example, hoặc sao chép đoạn code trên và dán vào editor của Arduino IDE

/* * DIYables WebApp Library - Web RTC Example * * This example demonstrates the Web RTC feature: * - Real-time clock display for both Arduino and client device * - One-click time synchronization from web browser to Arduino * - Hardware RTC integration for persistent timekeeping * - Visual time difference monitoring * * Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT * * Setup: * 1. Update WiFi credentials below * 2. Upload the sketch to your Arduino * 3. Open Serial Monitor to see the IP address * 4. Navigate to http://[IP_ADDRESS]/web-rtc */ #include <DIYablesWebApps.h> #include "RTC.h" // WiFi credentials - UPDATE THESE WITH YOUR NETWORK const char WIFI_SSID[] = "YOUR_WIFI_SSID"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // Create WebApp server and page instances UnoR4ServerFactory serverFactory; DIYablesWebAppServer webAppsServer(serverFactory, 80, 81); DIYablesHomePage homePage; DIYablesWebRTCPage webRTCPage; void setup() { Serial.begin(9600); delay(1000); Serial.println("DIYables WebApp - Web RTC Example"); // Initialize RTC RTC.begin(); // Check if RTC is running and set initial time if needed RTCTime savedTime; RTC.getTime(savedTime); if (!RTC.isRunning() || savedTime.getYear() == 2000) { Serial.println("RTC is NOT running, setting initial time..."); // Set a default time - you can modify this to match current time RTCTime startTime(28, Month::AUGUST, 2025, 12, 0, 0, DayOfWeek::THURSDAY, SaveLight::SAVING_TIME_ACTIVE); RTC.setTime(startTime); Serial.println("RTC initialized with default time"); } else { Serial.println("RTC is already running"); } // Print initial RTC time RTCTime initialTime; RTC.getTime(initialTime); Serial.print("Initial RTC Time: "); Serial.print(initialTime.getYear()); Serial.print("/"); Serial.print(Month2int(initialTime.getMonth())); Serial.print("/"); Serial.print(initialTime.getDayOfMonth()); Serial.print(" - "); if (initialTime.getHour() < 10) Serial.print("0"); Serial.print(initialTime.getHour()); Serial.print(":"); if (initialTime.getMinutes() < 10) Serial.print("0"); Serial.print(initialTime.getMinutes()); Serial.print(":"); if (initialTime.getSeconds() < 10) Serial.print("0"); Serial.print(initialTime.getSeconds()); Serial.println(); // Add pages to server webAppsServer.addApp(&homePage); webAppsServer.addApp(&webRTCPage); // Optional: Add 404 page for better user experience webAppsServer.setNotFoundPage(DIYablesNotFoundPage()); // Set callback for time sync from web webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived); // Set callback for time request from web webRTCPage.onTimeRequestToWeb(onTimeRequested); // Start the WebApp server if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) { while (1) { Serial.println("Failed to connect to WiFi"); delay(1000); } } } void loop() { // Handle web server webAppsServer.loop(); // Send current time to web clients and print to Serial every 1 second static unsigned long lastUpdate = 0; if (millis() - lastUpdate >= 1000) { lastUpdate = millis(); // Get current RTC time RTCTime currentTime; RTC.getTime(currentTime); // Send time to web clients in human readable format webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()), currentTime.getDayOfMonth(), currentTime.getHour(), currentTime.getMinutes(), currentTime.getSeconds()); // Print time to Serial Monitor Serial.print("RTC Time: "); Serial.print(currentTime.getYear()); Serial.print("/"); Serial.print(Month2int(currentTime.getMonth())); Serial.print("/"); Serial.print(currentTime.getDayOfMonth()); Serial.print(" - "); if (currentTime.getHour() < 10) Serial.print("0"); Serial.print(currentTime.getHour()); Serial.print(":"); if (currentTime.getMinutes() < 10) Serial.print("0"); Serial.print(currentTime.getMinutes()); Serial.print(":"); if (currentTime.getSeconds() < 10) Serial.print("0"); Serial.print(currentTime.getSeconds()); Serial.println(); } delay(10); } // Callback function called when web client sends time sync command void onTimeSyncReceived(unsigned long unixTimestamp) { Serial.print("Time sync received: "); Serial.println(unixTimestamp); // Convert Unix timestamp to RTCTime RTCTime newTime; newTime.setUnixTime(unixTimestamp); // Set RTC time RTC.setTime(newTime); Serial.println("Arduino RTC synchronized!"); } // Callback function called when web client requests current Arduino time void onTimeRequested() { // Get current RTC time and send to web in human readable format RTCTime currentTime; RTC.getTime(currentTime); webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()), currentTime.getDayOfMonth(), currentTime.getHour(), currentTime.getMinutes(), currentTime.getSeconds()); }

Cấu hình thông tin WiFi trong code bằng cách cập nhật các dòng sau:

const char WIFI_SSID[] = "YOUR_WIFI_NETWORK"; const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";

Nhấp nút Upload trên Arduino IDE để upload code lên Arduino.
Mở Serial Monitor trên Arduino IDE
Chờ kết nối WiFi và thông tin WiFi được in ra trên Serial Monitor.
Kiểm tra kết quả trên Serial Monitor. Nó sẽ trông như bên dưới

COM6

Send

DIYables WebApp - Web RTC Example RTC is already running Initial RTC Time: 2025/8/28 - 12:00:08 INFO: Added app / INFO: Added app /web-rtc DIYables WebApp Library Platform: Arduino Uno R4 WiFi Network connected! IP address: 192.168.0.2 HTTP server started on port 80 Configuring WebSocket server callbacks... WebSocket server started on port 81 WebSocket URL: ws://192.168.0.2:81 WebSocket server started on port 81 ========================================== DIYables WebApp Ready! ========================================== 📱 Web Interface: http://192.168.0.2 🔗 WebSocket: ws://192.168.0.2:81 📋 Available Applications: 🏠 Home Page: http://192.168.0.2/ 🕐 Web RTC: http://192.168.0.2/web-rtc ==========================================

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Nếu bạn không thấy gì, hãy khởi động lại bo mạch Arduino.

Sử Dụng Giao Diện Web

Mở trình duyệt web trên máy tính hoặc thiết bị di động được kết nối với cùng mạng WiFi
Nhập địa chỉ IP hiển thị trong Serial Monitor vào trình duyệt web
Ví dụ: http://192.168.1.100
Bạn sẽ thấy trang chủ như hình bên dưới:

Arduino UNO R4 diyables webapp home page with web rtc app

Nhấp vào liên kết Web RTC, bạn sẽ thấy giao diện ứng dụng Web RTC như bên dưới:

Arduino UNO R4 diyables webapp web rtc app

Hoặc bạn cũng có thể truy cập trang trực tiếp bằng địa chỉ IP theo sau là /web-rtc. Ví dụ: http://192.168.1.100/web-rtc
Bạn sẽ thấy giao diện Web RTC hiển thị:

Thời Gian Arduino: Thời gian hiện tại từ RTC của Arduino
Thời Gian Thiết Bị Của Bạn: Thời gian hiện tại từ trình duyệt web/thiết bị của bạn
Chênh Lệch Thời Gian: Chênh lệch giữa hai thời gian tính bằng phút
Nút Đồng Bộ Thời Gian Arduino: Nhấp để đồng bộ thời gian Arduino với thiết bị của bạn

Đồng Bộ Thời Gian

Nhấp nút "Sync Arduino Time" để đồng bộ RTC của Arduino với thời gian địa phương của thiết bị

Quá trình đồng bộ:

Lấy thời gian địa phương hiện tại của thiết bị (không phải UTC)
Điều chỉnh theo múi giờ để đảm bảo đồng bộ thời gian địa phương chính xác
Gửi timestamp đến Arduino qua WebSocket
Arduino cập nhật RTC với thời gian nhận được
Giao diện web cập nhật để hiển thị thời gian đã đồng bộ

Sau khi đồng bộ, chênh lệch thời gian sẽ tối thiểu (thường là 0-1 phút)

Arduino sẽ duy trì thời gian chính xác ngay cả sau khi đóng giao diện web

Giải Thích Code

Thành Phần Chính

#include <DIYablesWebApps.h> #include <RTC.h> // Initialize web server and RTC page DIYablesWebAppServer server; DIYablesWebRTCPage rtcPage;

Hàm Setup

void setup() { Serial.begin(9600); // Initialize RTC RTC.begin(); // Setup WiFi connection server.setupWiFi(WIFI_SSID, WIFI_PASSWORD); // Add RTC page to server server.addWebApp(rtcPage); // Set up callback functions rtcPage.onTimeSyncFromWeb(onTimeSyncReceived); rtcPage.onTimeRequestToWeb(onTimeRequested); // Start the server server.begin(); }

Hàm Callback

Callback Đồng Bộ Thời Gian:

// Called when web interface sends time sync command void onTimeSyncReceived(unsigned long unixTimestamp) { Serial.print("Time sync received: "); Serial.println(unixTimestamp); // Convert Unix timestamp to RTCTime RTCTime newTime; newTime.setUnixTime(unixTimestamp); // Set RTC time RTC.setTime(newTime); Serial.println("Arduino RTC synchronized!"); }

Callback Yêu Cầu Thời Gian:

// Called when web interface requests current Arduino time void onTimeRequested() { RTCTime currentTime; RTC.getTime(currentTime); // Send current time to web interface rtcPage.sendTimeToWeb( currentTime.getYear(), currentTime.getMonth(), currentTime.getDayOfMonth(), currentTime.getHour(), currentTime.getMinutes(), currentTime.getSeconds() ); }

Vòng Lặp Chính

void loop() { server.handleClient(); // Optional: Print current time every 10 seconds static unsigned long lastPrint = 0; if (millis() - lastPrint > 10000) { RTCTime currentTime; RTC.getTime(currentTime); Serial.print("Current Arduino Time: "); Serial.print(currentTime.getHour()); Serial.print(":"); if (currentTime.getMinutes() < 10) Serial.print("0"); Serial.print(currentTime.getMinutes()); Serial.print(":"); if (currentTime.getSeconds() < 10) Serial.print("0"); Serial.println(currentTime.getSeconds()); lastPrint = millis(); } delay(10); }

Phương Thức API

Phương Thức Class DIYablesWebRTCPage

onTimeSyncFromWeb(callback)

Thiết lập hàm callback để xử lý đồng bộ thời gian từ trình duyệt web
Tham số: void (*callback)(unsigned long unixTimestamp)
Sử dụng: Được gọi khi người dùng nhấp nút "Sync Arduino Time"

onTimeRequestToWeb(callback)

Thiết lập hàm callback để xử lý yêu cầu thời gian từ trình duyệt web
Tham số: void (*callback)()
Sử dụng: Được gọi khi giao diện web yêu cầu thời gian Arduino hiện tại

sendTimeToWeb(year, month, day, hour, minute, second)

Gửi thời gian Arduino hiện tại đến giao diện web
Tham số:

year: Năm hiện tại (ví dụ: 2025)
month: Tháng hiện tại (1-12)
day: Ngày hiện tại trong tháng (1-31)
hour: Giờ hiện tại (0-23)
minute: Phút hiện tại (0-59)
second: Giây hiện tại (0-59)

Giao Tiếp WebSocket

Tin Nhắn Từ Web Đến Arduino

RTC:GET_TIME - Yêu cầu thời gian Arduino hiện tại
RTC:SYNC:[timestamp] - Đồng bộ thời gian Arduino với Unix timestamp

Tin Nhắn Từ Arduino Đến Web

DATETIME:YYYY,MM,DD,HH,MM,SS - Gửi các thành phần thời gian Arduino hiện tại

Khắc Phục Sự Cố

Các Vấn Đề Thường Gặp

1. Chênh Lệch Thời Gian Vài Giờ

Vấn đề: Arduino hiển thị thời gian khác vài giờ so với thời gian thiết bị
Nguyên nhân: Thường là vấn đề về múi giờ hoặc RTC không được khởi tạo đúng cách
Giải pháp:

Nhấp nút "Sync Arduino Time" để đồng bộ lại
Kiểm tra xem RTC có được khởi tạo đúng cách trong setup() không
Xác minh kết nối WiFi ổn định

2. Lỗi "Not connected to Arduino"

Vấn đề: Lỗi khi nhấp nút đồng bộ
Nguyên nhân: Kết nối WebSocket thất bại
Giải pháp:

Kiểm tra xem địa chỉ IP Arduino có đúng không
Làm mới trang web
Xác minh Arduino được kết nối với cùng mạng WiFi
Kiểm tra cài đặt firewall

3. Thời Gian Ngừng Cập Nhật

Vấn đề: Hiển thị thời gian bị đóng băng hoặc không cập nhật
Nguyên nhân: Kết nối WebSocket bị mất hoặc RTC dừng
Giải pháp:

Làm mới trang web
Kiểm tra trạng thái kết nối WebSocket
Khởi động lại Arduino nếu RTC không phản hồi

4. Chênh Lệch Thời Gian Lớn (Ngày/Tháng)

Vấn đề: Chênh lệch thời gian hiển thị hàng ngàn phút
Nguyên nhân: RTC không được thiết lập đúng cách hoặc đã lệch đáng kể
Giải pháp: Nhấp nút đồng bộ nhiều lần và xác minh các hàm callback

Mẹo Debug

Bật Debug Serial:

void onTimeSyncReceived(unsigned long unixTimestamp) { Serial.print("Time sync received: "); Serial.println(unixTimestamp); // ... rest of function } void onTimeRequested() { Serial.println("Time request received from web"); // ... rest of function }

Kiểm Tra Khởi Tạo RTC:

void setup() { // ... other setup code if (RTC.begin()) { Serial.println("RTC initialized successfully"); } else { Serial.println("RTC initialization failed!"); } }

Sử Dụng Nâng Cao

Ghi Log Dữ Liệu Với Timestamps

void logSensorData(float temperature, float humidity) { RTCTime currentTime; RTC.getTime(currentTime); String logEntry = String(currentTime.getYear()) + "-" + String(currentTime.getMonth()) + "-" + String(currentTime.getDayOfMonth()) + " " + String(currentTime.getHour()) + ":" + String(currentTime.getMinutes()) + ":" + String(currentTime.getSeconds()) + " - " + "Temp: " + String(temperature) + "°C, " + "Humidity: " + String(humidity) + "%"; Serial.println(logEntry); // Save to SD card, send to database, etc. }

Các Hành Động Định Kỳ

void checkScheduledActions() { RTCTime currentTime; RTC.getTime(currentTime); // Turn on LED every day at 6:00 AM if (currentTime.getHour() == 6 && currentTime.getMinutes() == 0) { digitalWrite(LED_BUILTIN, HIGH); Serial.println("Morning LED activated!"); } // Turn off LED every day at 10:00 PM if (currentTime.getHour() == 22 && currentTime.getMinutes() == 0) { digitalWrite(LED_BUILTIN, LOW); Serial.println("Evening LED deactivated!"); } }

Tích Hợp Nhiều Web Apps

// Combine WebRTC with other web apps server.addWebApp(rtcPage); // Real-time clock server.addWebApp(monitorPage); // Serial monitor with timestamps server.addWebApp(plotterPage); // Data plotting with time axis

Ứng Dụng Và Trường Hợp Sử Dụng

Dự Án Giáo Dục

Học Quản Lý Thời Gian: Dạy học sinh về RTC, đo thời gian và đồng bộ
Khái Niệm Thời Gian IoT: Minh họa đồng bộ thời gian mạng trong hệ thống IoT
Dự Án Ghi Log Dữ Liệu: Thêm timestamps vào các bài đọc cảm biến và thí nghiệm
Hệ Thống Lập Lịch: Tạo hệ thống tự động và điều khiển dựa trên thời gian

Ứng Dụng Thực Tế

Tự Động Hóa Nhà: Lập lịch đèn, tưới tiêu hoặc các thiết bị khác
Thu Thập Dữ Liệu: Đánh dấu thời gian cho các bài đọc cảm biến để phân tích
Ghi Log Sự Kiện: Ghi lại khi các sự kiện cụ thể xảy ra với thời gian chính xác
Giám Sát Từ Xa: Kiểm tra trạng thái thiết bị và thời gian cập nhật cuối từ xa

Lợi Ích STEM Education

Khái Niệm Múi Giờ: Hiểu thời gian địa phương so với UTC và xử lý múi giờ
Giao Tiếp Mạng: Học giao tiếp WebSocket và cập nhật thời gian thực
Tích Hợp Phần Cứng: Kết hợp giao diện web với chức năng RTC phần cứng
Giải Quyết Vấn Đề: Debug các vấn đề thời gian và đồng bộ

Thông Số Kỹ Thuật

Sử Dụng Bộ Nhớ

Flash Memory: ~8KB cho chức năng WebRTC
SRAM: ~2KB trong quá trình hoạt động
WebSocket Buffer: ~1KB cho xử lý tin nhắn

Đặc Tính Hiệu Suất

Tần Số Cập Nhật: Cập nhật thời gian thực qua WebSocket
Độ Chính Xác Đồng Bộ: Thường trong vòng 1-2 giây
Network Overhead: ~50 bytes mỗi tin nhắn cập nhật thời gian
Thời Gian Phản Hồi: <100ms cho các hoạt động đồng bộ thời gian

Khả Năng Tương Thích

Bo Mạch Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
Trình Duyệt: Tất cả trình duyệt hiện đại có hỗ trợ WebSocket
Thiết Bị: Desktop, tablet và thiết bị di động
Mạng: Mạng WiFi có truy cập internet

Tóm Tắt

Ví dụ WebRTC minh họa cách:

Tạo giao diện đồng hồ thời gian thực trên web
Đồng bộ RTC Arduino với thời gian trình duyệt web
Hiển thị thông tin thời gian ở định dạng thân thiện người dùng
Giám sát chênh lệch thời gian và trạng thái kết nối
Tích hợp chức năng thời gian với các ứng dụng web khác
Xây dựng dự án IoT giáo dục với các tính năng quản lý thời gian

Ví dụ này hoàn hảo cho các dự án yêu cầu đo thời gian chính xác, ghi log dữ liệu với timestamps, tự động hóa theo lịch trình và các minh họa giáo dục về khái niệm đồng bộ thời gian trong hệ thống IoT.