Chương 4. THIẾT KẾ WEBSERVER HIỂN THỊ DỮ LIỆU
Socket client- ESP8266
(Máy tính, điện thoại...) Arduino Internet Internet Serial
Hình 4.6. Mô hình web socket
Phân tích mô hình:
• Socket server nằm ở tầng cao nhất gọi là tầng server.
• Tầng thứ hai là tầng socket client, là các thiết bị giao tiếp với server qua mạng internet như esp8266, trình duyệt web, ứng dụng android, windown…
61 • Tầng thứ ba là Arduino hoặc các vi điều khiển khác giao tiếp với esp8266, vì hầu hết các VĐK điều trang bị giao tiếp UART (Serial) nên không cần trang bị thêm về phần cứng hay thay đổi mã chương trình nhiều. Điều này giúp dễ dàng tích hợp và kết nối với các mô hình, thiết bị sẵn có.
Nội dung của phần thiết kế web server sẽ xây dựng một mô hình kết nối mẫu, cung cấp các mã nguồn các tầng để phát triển và hướng dẫn triển khai một hệ thống tương tự.
Toàn bộ mã nguồn các tầng của mô hình: https://github.com/mnaduc/WebSocket_doan
Socket server và xây dựng giao diện web. 4.2.1.1. Cài đặt nodeJS
Có nhiều nền tảng để xây dựng một server tuy nhiên nhóm đã lựa chọn nodeJS để xây dựng socket server. NodeJS là một nền tảng được xây dựng trên “V8 Javascript
engine” được viết bằng C++ và Javascript. Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009. Hệ thống nén của Node.js, npm, là hệ thống thư viện nguồn mở lớn nhất thế giới.[9]
NodeJS có thể cài đặt trên hầu hết các hệ điều hành phổ biến hiện nay như Windowns, macOS, ubuntu… Truy cập đường dẫn bên dưới, lựa chọn phiên bản phù hợp và cài đặt nodeJS trên máy tính dùng để chạy server:
https://nodejs.org/en/download/
Kiểm tra kết quả cài đặt và phiên bản sử dụng, mở Command Prompt (nhấn tổ hợp phím Window + R và tìm kiếm “cmd”) hoặc Windows PowerShell (nhấn phím window và tìm kiếm Windows PowerShell), gõ các lệnh sau:
62
4.2.1.2. Khởi chạy socket server
Thư mục “01. socket_server_nodejs” (gọi là thư mục server) là thư mục chứa các file cơ bản bao gồm mã chương trình, các file tài nguyên, giao diện web của server:
Hình 4.8. Thư mục “01. socket_server_nodejs”
NodeJS không giống như một phần mềm có giao diện thông thường, mọi thao tác sẽ phải sử dụng thông qua cửa sổ lệnh, mở chương trình Command Prompt hoặc
Windows PowerShell từ bên trong thư mục server (nhấn giữ shift và click chuột phải, sau
đó chọn “Open PowerShell window here”). Cửa sổ lệnh sẽ khởi chạy và đường dẫn trên chương trình là đường dẫn tới thư mục server hiện tại, mọi thao tác tiếp theo sẽ tác động tới bên trong thư mục server này.
Hình 4.9. Cửa sổ lệnh Windows PowerShell để khởi chạy server
Tuy nhiên, những file hiện tại chỉ là những file cơ bản của chương trình, chương trình cần phải cài đặt những thư viện và tài nguyên phụ thuộc để có thể thực thi (package.json là file chứa những thông tin và yêu cầu cài đặt cần thiết cho chương trình).
63 Thực thi lệnh “npm install” để tải và cài đặt những file, thư viện cần thiết. Sau đó, khởi chạy server bằng lệnh “node index.js”:
Hình 4.10. Khởi chạy server
Đến đây không có thông báo nào hiện ra, con trỏ đang ở đầu dòng là server đang được khởi chạy bên trong máy tính (để đóng server sử dụng tổ hợp phím Ctrl+C). Để kiểm chứng server đang khởi chạy mở trình duyệt web và truy cập vào địa chỉ: http://localhost:3000/ (localhost là địa chỉ mặc định của máy chủ nội bộ và 3000 là cổng của server).
Hình 4.11. http://localhost:3000/
Giải thích hoạt động: Theo mô hình kết nối, khi truy cập địa chỉ trên, trình duyệt web sẽ tìm đến server dựa vào địa chỉ và cổng kết nối. Sau đó yêu cầu server gửi nội trang web bao gồm các file cần thiết bao gồm file dựng giao diện (chứa trong trong thư mục view) và các nguồn tài nguyên cần thiết như hình ảnh, âm thanh, chương trình xử lý ở phía người dùng… (chứa trong thư mục public). Sau đó mỗi 2 giây, server sẽ gửi một số ngẫu nhiên đến trang web để hiển thị.
Tuy nhiên, để có thể khởi chạy server này là một máy chủ local (nội bộ), truy cập được trong một mạng nội bộ như kết nối chung wifi, chung mạng LAN thì cần phải xác
64 định được IP nội bộ của máy tính chạy server. Đầu tiên, cần xác định địa chỉ của IP của máy tính chạy server (thường có dạng 192.168.1.xxx) bằng cách mở cửa sổ lệnh và nhập lệnh “ipconfig”:
Hình 4.12. Xác định địa chỉ IP máy tính chạy server
Ví dụ server trên đang chạy ở địa chỉ IP 192.168.1.6 và cổng 3000, mở file HOME.js trong thư mục public bằng bất kỳ phần mềm soạn thảo code hoặc soạn thảo văn bản nào và sửa dòng code đầu tiên, thay “http://localhost:3000/web” thành “IP:3000/web", với IP là địa chỉ IP xác định ở trên. Với server trên sẽ thay đổi như sau:
65
Hình 4.13. Thay đổi địa chỉ IP
Lưu lại file và khởi chạy lại server, khi này có thể sử dụng một thiết bị khác như điện thoại hoặc máy tính cùng mạng với máy tính chạy server truy cập vào trang web trên với địa chỉ IP:3000 (Ví dụ: với server trên là 192.168.1.6:3000). Đây cũng là địa chỉ để các socket client kết nối và giao tiếp với server trong cùng một mạng nội bộ (cùng mạng wifi, mạng LAN…).
4.2.1.3. Xây dựng giao diện web
Để hỗ trợ hiển thị dữ liệu cho các bài học, cũng như các mô hình, dự án khác, giao diện web hiển thị dữ liệu nhóm đã thiết kế để hiển thị dưới các dạng sau.
❖ Đối với tín hiệu digital sẽ sử dụng hình ảnh đèn led để mô phỏng tín hiệu hai trạng thái.
66
❖ Xây dựng biểu đồ cột và đường để thể hiện các tín hiệu analog.
Hình 4.15. Biểu đồ cột và đường (WEB)
❖ Bảng dữ liệu để hiển thị liệt kê các thông số:
67
4.2.1.4. Sản phẩm giao diện web và khả năng phát triển
Kết quả giao diện web của nhóm đã xây dựng như sau: