Arduino UNO R4 WebSocket
Hướng dẫn này giải thích WebSocket là gì, tại sao nó hữu ích khi sử dụng Arduino UNO R4, và cách sử dụng WebSocket với Arduino UNO R4. Chúng tôi sẽ hướng dẫn bạn tạo ứng dụng chat cho phép trình duyệt web giao tiếp với Arduino UNO R4, giúp bạn:
- Gửi tin nhắn từ cửa sổ chat trên trình duyệt web để điều khiển Arduino UNO R4.
- Nhận tin nhắn tức thời từ Arduino UNO R4. Bạn có thể thay đổi thiết lập này để theo dõi Arduino UNO R4 trực tiếp.
Linh Kiện 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) |
WebSocket trên Arduino UNO R4 là gì?
Bạn có thể hỏi, "WebSocket là gì?" Đơn giản thôi: WebSocket là công nghệ cho phép trình duyệt web giao tiếp trực tiếp với web server ngay lập tức.
- Không có WebSocket, bạn phải tải lại trang web để xem cập nhật mới. Điều này không thuận tiện lắm.
- Với WebSocket, trang web duy trì kết nối liên tục với server. Điều này có nghĩa là chúng có thể chia sẻ thông tin ngay lập tức mà không cần tải lại trang.
Bạn thường sử dụng công nghệ WebSocket trong các ứng dụng web hàng ngày như game online, tin nhắn tức thời và cập nhật thị trường chứng khoán.
Tại sao chúng ta cần WebSocket để điều khiển Arduino UNO R4 mượt mà?
Giả sử bạn muốn điều khiển xe điều khiển từ xa bằng smartphone hoặc trình duyệt web trên máy tính. Nếu không sử dụng WebSocket, bạn sẽ phải làm mới trang web mỗi khi muốn thay đổi hướng hoặc tốc độ của xe. Giống như việc nhấn nút "reload" mỗi khi bạn đưa ra lệnh cho xe vậy.
WebSocket cho phép kết nối liên tục và trực tiếp giữa trình duyệt web và xe. Bạn có thể điều khiển hướng và tốc độ của xe mà không cần làm mới trang. Giống như xe phản hồi ngay lập tức với lệnh của bạn theo thời gian thực, không có độ trễ từ việc tải lại trang.
WebSocket giúp dễ dàng hơn trong việc:
- Gửi dữ liệu từ trình duyệt web đến Arduino UNO R4 mà không cần tải lại trang web.
- Gửi dữ liệu ngược lại từ Arduino UNO R4 về trình duyệt web mà không cần làm mới trang.
Điều này cho phép cuộc trò chuyện qua lại dễ dàng theo thời gian thực.
Lợi ích của WebSocket với Arduino UNO R4:
- Điều Khiển Thời Gian Thực: WebSocket cho phép tương tác ngay lập tức với Arduino UNO R4, cho phép phản hồi nhanh với lệnh của bạn để có trải nghiệm mượt mà.
- Kết Nối Liên Tục: Duy trì kết nối liên tục mà không cần làm mới trang điều khiển, đảm bảo đường giao tiếp luôn sẵn sàng cho các chỉ dẫn trực tiếp.
- Hiệu Quả: Tận hưởng phản hồi nhanh và trải nghiệm tốt hơn mà không cần tải lại trang nhiều lần, giúp hiệu quả và thú vị hơn.
Web Chat với Arduino UNO R4 qua WebSocket
Các tài liệu của trang web như HTML, CSS và JavaScript được lưu trong file riêng có tên index.h. Vậy trong Arduino IDE, chúng ta sẽ sử dụng hai file code.
- File .ino là code Arduino UNO R4. Nó thiết lập web server và WebSocket server.
- File .h chứa nội dung cho trang web.
Các Bước Thực Hiện
Thực hiện theo từng bước sau:
- Nếu đây là lần đầu tiên bạn sử dụng Arduino Uno R4 WiFi/Minima, hãy tham khảo hướng dẫn Arduino UNO R4 - Cài Đặt Phần Mềm.
- Kết nối board Arduino Uno R4 với máy tính bằng cáp USB.
- Khởi động Arduino IDE trên máy tính của bạn.
- Chọn board Arduino Uno R4 phù hợp (ví dụ: Arduino Uno R4 WiFi) và cổng COM.
- Mở Library Manager bằng cách nhấp vào biểu tượng Library Manager ở phía bên trái của Arduino IDE.
- Tìm kiếm Web Server for Arduino Uno R4 WiFi và tìm thư viện Web Server được tạo bởi DIYables.
- Nhấp vào nút Install để thêm thư viện Web Server.
- Trong Arduino IDE, tạo sketch mới và đặt tên, ví dụ: newbiely.com.ino
- Sao chép code sau và mở trong Arduino IDE
/*
* Mã Arduino UNO R4 này được phát triển bởi newbiely.vn
* Mã Arduino UNO R4 này được cung cấp để sử dụng công khai, không có ràng buộc.
* Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập:
* https://newbiely.vn/tutorials/arduino-uno-r4/arduino-uno-r4-websocket
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
const char message[]{ "Hello from Arduino server!" };
ws.send(WebSocket::DataType::TEXT, message, strlen(message));
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
Serial.print(F("Received: "));
Serial.println(message);
String reply = "Received: " + String((char*)message);
ws.send(dataType, reply.c_str(), reply.length());
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
- Thay đổi thông tin WiFi (SSID và password) trong code thành thông tin của bạn.
- Để tạo file index.h trong Arduino IDE:
- Nhấp nút bên dưới biểu tượng serial monitor và chọn New Tab, hoặc nhấn phím Ctrl+Shift+N.
- Đặt tên file là index.h và nhấn nút OK.
- Sao chép code sau và dán vào file index.h.
- Bây giờ bạn có code trong hai file: newbiely.com.ino và index.h.
- Nhấn nút Upload trong Arduino IDE để tải code lên Arduino UNO R4.
- Mở Serial Monitor.
- Xem kết quả trên Serial Monitor.
- Ghi lại địa chỉ IP hiển thị và nhập vào thanh địa chỉ trình duyệt web trên smartphone hoặc máy tính của bạn.
- Trang web sẽ xuất hiện như mô tả bên dưới:
- Nhấn nút CONNECT để liên kết trang web với Arduino UNO R4 bằng WebSocket.
- Nhập văn bản và gửi đến Arduino UNO R4.
- Quan sát phản hồi từ Arduino UNO R4.
- Nếu bạn chỉ thay đổi HTML trong file có tên index.h và không sửa đổi file có tên newbiely.com.ino, Arduino IDE sẽ không cập nhật HTML khi bạn biên dịch và upload code lên Arduino UNO R4.
- Để cập nhật nội dung HTML thông qua Arduino IDE, hãy thực hiện thay đổi nhỏ trong file newbiely.com.ino, như thêm dòng trống hoặc comment.
/*
* Mã Arduino UNO R4 này được phát triển bởi newbiely.vn
* Mã Arduino UNO R4 này được cung cấp để sử dụng công khai, không có ràng buộc.
* Để xem hướng dẫn chi tiết và sơ đồ kết nối, vui lòng truy cập:
* https://newbiely.vn/tutorials/arduino-uno-r4/arduino-uno-r4-websocket
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
/* Add some basic styling for the chat window */
body {
background-color: #E1EFEF;
font-size: 20px;
line-height: 1.3;
}
button, input {
font-size: 20px;
line-height: 1.3;
}
.chat-container {
margin: 0 auto;
padding: 10px;
}
.chat-messages {
height: 250px;
overflow-y: auto;
padding: 5px;
margin-bottom: 5px;
}
.user-input {
display: flex;
margin-bottom: 20px;
}
.user-input input {
flex: 1;
border: 1px solid #444;
padding: 5px;
}
.user-input button {
margin-left: 5px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.websocket button {
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.websocket .label {
margin-left: auto;
}
.message-sent {
border-radius: 25px;
background-color: #d35400;
float: right;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
.message-received {
border-radius: 25px;
background-color: white;
float: left;
width: fit-content;
padding: 10px 20px;
margin: 0;
}
</style>
<script>
var ws;
var wsm_max_len = 4096; /* bigger length causes uart0 buffer overflow with low speed smart device */
function update_text(text) {
var chat_messages = document.getElementById("chat-messages");
chat_messages.innerHTML += '<div style="width:100%;overflow: auto;">' + text + '</div>';
chat_messages.scrollTop = chat_messages.scrollHeight;
}
function send_onclick() {
if(ws != null) {
var message = document.getElementById("message").value;
if (message) {
document.getElementById("message").value = "";
ws.send(message + "\n");
update_text('<p class="message-sent">' + message + '</p>');
// You can send the message to the server or process it as needed
}
}
}
function connect_onclick() {
if(ws == null) {
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
} else
ws.close();
}
function ws_onopen() {
document.getElementById("ws_state").innerHTML = "<span style='color:blue'>CONNECTED</span>";
document.getElementById("bt_connect").innerHTML = "Disconnect";
document.getElementById("chat-messages").innerHTML = "";
}
function ws_onclose() {
document.getElementById("ws_state").innerHTML = "<span style='color:gray'>CLOSED</span>";
document.getElementById("bt_connect").innerHTML = "Connect";
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function ws_onmessage(e_msg) {
e_msg = e_msg || window.event; // MessageEvent
console.log(e_msg.data);
update_text('<p class="message-received">' + e_msg.data + '</p>');
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Arduino Uno R4 WebSocket</h2>
<div class="websocket">
<button class="connect-button" id="bt_connect" onclick="connect_onclick()">Connect</button>
<span class="label">WebSocket: <span id="ws_state"><span style="color:blue">CLOSED</span></span></span>
</div>
<div class="chat-messages" id="chat-messages"></div>
<div class="user-input">
<input type="text" id="message" placeholder="Type your message...">
<button onclick="send_onclick()">Send</button>
</div>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</div>
</body></html>
)=====";
COM6
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
※ Lưu ý:
Giải Thích Code Từng Dòng
Vui lòng đọc các comment trong code để hiểu giải thích từng dòng của code Arduino UNO R4 ở trên.
Cách Thức Hoạt Động Của Hệ Thống
Code Arduino UNO R4 thiết lập web server và WebSocket server. Đây là cách nó hoạt động:
- Nhập địa chỉ IP của Arduino UNO R4 vào trình duyệt web.
- Web server của Arduino UNO R4 gửi trang web (được tạo từ HTML, CSS, JavaScript) đến trình duyệt của bạn.
- Trình duyệt hiển thị trang web.
- Nhấp nút CONNECT trên trang web. Hành động này bắt đầu kết nối WebSocket với server trên Arduino UNO R4.
- Nếu bạn nhập văn bản và nhấp nút SEND, JavaScript sẽ gửi văn bản của bạn đến Arduino UNO R4 thông qua WebSocket.
- WebSocket server trên Arduino UNO R4 nhận văn bản của bạn và gửi phản hồi lại trang web của bạn.
Dưới đây là các ví dụ khác về Arduino UNO R4 WebSocket mà bạn có thể học:
Khắc Phục Sự Cố Cho Arduino Uno R4
Nếu code trên không hoạt động, vui lòng cập nhật phiên bản mới nhất cho module WiFi của Arduino UNO R4
- Kết nối Arduino Uno R4 WiFi với PC
- Mở Arduino IDE 2
- Vào Tools Firmware Updater
- Chọn board Arduino Uno R4 WiFi và cổng
- Nhấp nút CHECK UPDATES
- Danh sách các phiên bản firmware có sẵn sẽ xuất hiện
- Chọn phiên bản firmware mới nhất
- Nhấp nút INSTALL
- Chờ cho đến khi hoàn thành
- Khởi động lại Arduino Uno R4 WiFi của bạn
- Biên dịch lại và upload code lên Arduino Uno R4 WiFi
- Kiểm tra kết quả