BÀI THỰC HÀNH THEO NHÓM 01 – KIẾN THỨC CƠ BẢN VỀ CLIENT–SERVER

Môn: Phát triển Ứng dụng Web Nâng cao
Nhóm: 18
Ngày thực hiện: Thứ Ba, 12/08/2025 • Báo cáo: Thứ Tư, 13/08/2025 (buổi sáng)

---

1) Nội dung bài lab

• Phần A – Static Web Server (Express): phục vụ static files + API /api/info, custom header, xử lý 404/500.
• Phần B – HTTP Client (Node core): client.js tự xây dựng, hỗ trợ HTTP/HTTPS, GET/POST, test với Local, GitHub API, JSONPlaceholder.
• Phần C – Network Monitoring: monitor.js đo độ trễ, ghi báo cáo vào docs/network-report.json + ảnh minh họa trong screenshots/.

2) Cách chạy nhanh

Yêu cầu Node.js 16+.

# 1) Cài dependencies
npm install

# 2) Chạy server (port 3000)
npm run start
# Mở trình duyệt: http://localhost:3000

# 3) Chạy HTTP client tests (yêu cầu có Internet; server local có thể tắt/mở)
npm run client

# 4) Chạy monitoring benchmark (khuyên nên bật server trước)
npm run monitor

Lưu ý: client.js dùng http/https của Node, không sử dụng axios/fetch libraries theo yêu cầu đề bài.

3) Cấu trúc thư mục

lab01-nhom18/
├─ README.md
├─ package.json
├─ server.js
├─ client.js
├─ monitor.js
├─ public/
│  ├─ index.html
│  ├─ style.css
│  └─ script.js
├─ screenshots/
│  ├─ network-analysis.png
│  ├─ server-running.png
│  └─ api-response.png
├─ docs/
│  ├─ technical-report.md
│  └─ client-test-log.json        # sinh ra sau khi chạy npm run client
└─ presentation/
   └─ slides.pdf                  # (tùy chọn)

4) Yêu cầu đã đáp ứng

• Server Express port 3000, static files + API /api/info (timestamp/hostname/platform/uptime/...) và custom header X-Custom-Header.
• Nút AJAX ở index.html (dùng fetch của trình duyệt) để hiện thông tin server.
• HTTP client tự viết (không axios/fetch libs): GET local, GET GitHub API, POST JSONPlaceholder; ghi log JSON.
• Network monitoring: benchmark nhiều lần, xuất thống kê vào docs/network-report.json.
• Xử lý lỗi: 404 & 500.

5) Bonus gợi ý

• HTTPS self-signed (tham khảo): tạo khóa bằng OpenSSL và chạy server HTTPS (ví dụ https.createServer).
• WebSocket demo (tham khảo): ws package, echo server.
• Benchmark static files theo kích thước: thêm vài file .txt lớn trong /public và thêm vào targets ở monitor.js.

6) Thuyết trình gợi ý (15+10 phút)

• Giới thiệu nhóm, kiến trúc client–server, demo API + static, phân tích Network tab.
• Slides: đã để khung trong presentation/slides.pdf (bản skeleton).

---

Chúc buổi demo mượt mà!