SENSORS/ACTUATORS

INTERNET OF THING (IoT)

ESP8266 - Mạng Ethernet

ESP8266 WebSocket

Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu WebSocket là gì, tại sao chúng ta cần sử dụng nó để điều khiển ESP8266 một cách mượt mà, và cách sử dụng WebSocket với ESP8266. Trong một ví dụ thực tế, chúng ta sẽ học cách tạo một ứng dụng chat giữa trình duyệt web và ESP8266, cho phép bạn:

Nhập một tin nhắn vào cửa sổ trò chuyện trên trình duyệt web và gửi nó đến ESP8266. Bạn có thể điều chỉnh điều này để điều khiển ESP8266.
Nhận tin nhắn theo thời gian thực từ ESP8266. Bạn có thể điều chỉnh điều này để theo dõi ESP8266 theo thời gian thực.

Phần cứng cần chuẩn bị

1	×	ESP8266 NodeMCU ESP-12E
1	×	Recommended: ESP8266 NodeMCU ESP-12E (Uno-form)
1	×	USB Cable Type-A to Type-C (for USB-A PC)
1	×	USB Cable Type-C to Type-C (for USB-C PC)
1	×	(Khuyến nghị) Screw Terminal Expansion Board for ESP8266
1	×	(Khuyến nghị) Power Splitter for ESP8266 Type-C

Or you can buy the following kits:

1	×	DIYables Sensor Kit (30 sensors/displays)
1	×	DIYables Sensor Kit (18 sensors/displays)

ESP8266 Websocket là gì?

Giờ đây, bạn có thể đang tự hỏi, "WebSocket là gì?" Nó khá đơn giản: WebSocket là một công nghệ cho phép trình duyệt web nói chuyện trực tiếp với máy chủ web theo thời gian thực.

Không có WebSocket, bạn phải làm mới trang web để nhận được các cập nhật. Điều đó không thuận tiện lắm.
Với WebSocket, trang web và máy chủ luôn kết nối với nhau. Đ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 phải tải lại trang.

Có thể bạn sẽ gặp WebSocket trong các ứng dụng web hàng ngày như trò chơi trực tuyến, nhắn tin 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 ESP8266 một cách mượt mà?

Hãy tưởng tượng bạn muốn điều khiển một chiếc xe điều khiển từ xa bằng giao diện web trên điện thoại hoặc máy tính của bạn. Nếu không có WebSocket, mỗi lần bạn muốn thay đổi hướng hoặc tốc độ của xe, bạn sẽ phải tải lại trang web. Nó giống như phải nhấn nút "tải lại" mỗi khi lệnh của bạn đến được xe.

Giờ đây, với WebSocket, nó như có một kết nối liên tục và trực tiếp giữa điện thoại hoặc máy tính của bạn với chiếc xe. Bạn sẽ không còn cần làm mới trang mỗi khi muốn điều khiển xe hoặc điều chỉnh tốc độ của nó. Nó như thể chiếc xe luôn lắng nghe lệnh của bạn theo thời gian thực, mà không có bất kỳ sự chậm trễ nào do việc tải lại trang liên tục.

Nói chung, WebSocket cho phép bạn:

Gửi dữ liệu từ trình duyệt web đến ESP8266 mà không tải lại trang web.
Gửi dữ liệu từ ESP8266 đến trình duyệt web mà không tải lại trang web.

Điều này cho phép giao tiếp hai chiều theo thời gian thực.

Lợi ích của WebSocket với ESP8266:

Điều khiển thời gian thực: WebSocket cho phép giao tiếp tức thì với ESP8266, đảm bảo phản hồi nhanh với các lệnh để mang lại trải nghiệm người dùng liền mạch.
Kết nối duy trì: Duy trì một liên kết liên tục mà không làm mới trang điều khiển, tạo ra một đường liên lạc luôn sẵn sàng cho các chỉ thị ngay lập tức.
Hiệu quả: Trải nghiệm phản hồi nhanh mà không cần tải lại trang liên tục, tăng cường sự hài lòng của người dùng và hiệu suất tổng thể.

Trò chuyện trên web với ESP8266 qua WebSocket

Nội dung của trang web (HTML, CSS, JavaScript) được lưu riêng trong một tệp index.h. Vì vậy, chúng ta sẽ có hai tệp mã nguồn trong Arduino IDE:

Một file .ino chứa mã ESP8266, tạo ra một máy chủ web và máy chủ WebSocket.
Một file .h chứa nội dung của trang web.

Hướng dẫn từng bước

Nếu đây là lần đầu bạn sử dụng ESP8266, hãy xem ESP8266 - Cài đặt phần mềm.
Kết nối bo mạch ESP8266 với máy tính của bạn bằng cáp micro USB
Mở Arduino IDE trên máy tính của bạn.
Chọn bo mạch ESP8266 đúng (ví dụ NodeMCU 1.0 (ESP-12E Module)) và cổng COM.
Mở Trình quản lý thư viện bằng cách nhấp vào biểu tượng Trình quản lý thư viện ở thanh điều hướng bên trái của Arduino IDE.
Tìm kiếm “WebSockets”, sau đó tìm WebSockets do Markus Sattler tạo ra.
Nhấp nút Cài đặt để cài đặt thư viện WebSockets.

Trên Arduino IDE, tạo một sketch mới, đặt tên cho nó, ví dụ, newbiely.com.ino
Sao chép đoạn mã dưới đây và mở bằng Arduino IDE

/* * Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn * Mã ESP8266 NodeMCU 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/esp8266/esp8266-websocket */ #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include "index.h" const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT ESP8266WebServer server(80); // Web server on port 80 DIYables_ESP32_WebSocket* webSocket; void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) { switch (type) { case WStype_DISCONNECTED: Serial.printf("[%u] Disconnected!\n", num); break; case WStype_CONNECTED: { IPAddress ip = webSocket.remoteIP(num); Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]); } break; case WStype_TEXT: Serial.printf("[%u] Received text: %s\n", num, payload); // Send a response back to the client String echoMessage = "Received: " + String((char*)payload); webSocket.sendTXT(num, echoMessage); break; } } void setup() { Serial.begin(9600); delay(500); // 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"); // Initialize WebSocket server webSocket.begin(); webSocket.onEvent(webSocketEvent); // Serve a basic HTML page with JavaScript to create the WebSocket connection server.on("/", HTTP_GET, []() { Serial.println("Web Server: received a web page request"); String html = HTML_CONTENT; // Use the HTML content from the index.h file server.send(200, "text/html", html); }); server.begin(); Serial.print("ESP8266 Web Server's IP address: "); Serial.println(WiFi.localIP()); } void loop() { // Handle client requests server.handleClient(); // Handle WebSocket events webSocket.loop(); // TODO: Your code here }

Tạo tệp index.h trên Arduino IDE bằng cách:

Hoặc nhấp vào nút ngay bên dưới biểu tượng Serial Monitor và chọn New Tab, hoặc dùng phím Ctrl+Shift+N.

Đặt tên cho tệp là index.h và nhấn OK nút

Sao chép mã dưới đây và dán nó vào index.h.

/* * Mã ESP8266 NodeMCU này được phát triển bởi newbiely.vn * Mã ESP8266 NodeMCU 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/esp8266/esp8266-websocket */ const char *HTML_CONTENT = R"=====( <!DOCTYPE html>  <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>ESP8266 WebSocket</title> <meta name="viewport" content="width=device-width, initial-scale=0.7"> <link rel="icon" href="https://diyables.io/images/page/diyables.svg"> <style> /* Add some basic styling for the chat window */ body { font-size: 16px; } .chat-container { width: 400px; margin: 0 auto; padding: 10px; } .chat-messages { height: 250px; overflow-y: auto; border: 1px solid #444; 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; } </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 += text + '<br>'; 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('<span style="color:navy">' + message + '</span>'); // 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('<span style="color:blue">' + e_msg.data + '</span>'); } </script> </head> <body> <div class="chat-container"> <h2>ESP8266 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> )=====";

Chỉnh sửa thông tin WiFi (SSID và mật khẩu) trong mã để phù hợp với thông tin mạng của bạn.
Hiện tại bạn có mã trong hai tệp: newbiely.com.ino và index.h
Nhấp vào nút Upload trong Arduino IDE để tải mã lên ESP8266.
Mở Serial Monitor
Xem kết quả trên Serial Monitor.

COM6

Send

Connecting to WiFi... Connected to WiFi ESP8266 Web Server's IP address IP address: 192.168.0.5

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Ghi nhớ địa chỉ IP được hiển thị và nhập địa chỉ này vào thanh địa chỉ của trình duyệt trên điện thoại thông minh hoặc máy tính của bạn.
Bạn sẽ thấy trang web như dưới đây:

ESP8266 NodeMCU websocket trình duyệt web

Nhấn nút CONNECT để kết nối trang web với ESP8266 qua WebSocket.
Gõ một vài từ và gửi chúng đến ESP8266.
Bạn sẽ thấy phản hồi từ ESP8266.

máy chủ trò chuyện websocket cho ESP8266 NodeMCU

※ Lưu ý:

Nếu bạn sửa đổi nội dung HTML trong index.h và không chạm vào bất kỳ thứ gì trong newbiely.com.ino tệp, khi bạn biên dịch và tải mã lên ESP8266, Arduino IDE sẽ không cập nhật nội dung HTML.
Để Arduino IDE cập nhật nội dung HTML trong trường hợp này, hãy thực hiện một thay đổi trong tệp newbiely.com.ino (ví dụ thêm một dòng trống, thêm một chú thích...)

Giải thích mã theo từng dòng

Đoạn mã ESP8266 ở trên chứa giải thích theo từng dòng. Vui lòng đọc các chú thích trong mã!

Cách hệ thống vận hành

Mã ESP8266 hoạt động bằng cách tạo cả máy chủ web và máy chủ WebSocket. Quá trình diễn ra như sau:

Khi bạn nhập địa chỉ IP của ESP8266 vào trình duyệt web, một yêu cầu được gửi cho trang web (Giao diện người dùng) từ ESP8266.
Máy chủ web của ESP8266 phản hồi bằng cách truyền nội dung của trang web (HTML, CSS, JavaScript).
Sau đó, trình duyệt của bạn hiển thị trang web.
Khi bạn nhấn nút CONNECT, mã JavaScript được nhúng trong trang web thiết lập một kết nối WebSocket tới máy chủ WebSocket trên ESP8266.
Với kết nối WebSocket được thiết lập, khi bạn gõ gì đó và nhấn nút SEND, mã JavaScript gửi nội dung đó tới ESP8266 qua kết nối WebSocket đang hoạt động ở chế độ nền.
Khi nhận được giá trị góc, máy chủ WebSocket gửi phản hồi lại cho trang web.

Bạn có thể tìm hiểu thêm các ví dụ WebSocket ESP8266 ở dưới đây: