Lesson 07 — Real-time & WebSocket

Ba module tương tác: so sánh polling / long polling / WebSocket, mô phỏng nâng cấp HTTP → WebSocket (handshake từng bước), và demo chat song công 2 client.

1. So sánh kỹ thuật real-time

Chọn một kỹ thuật, sau đó bấm "Bước tiếp" để xem timeline request, số lần kết nối và overhead thực tế với 5.000 client gửi 20 byte/tin.

CLIENT SERVER t₀ t₁ t₂ t₃ t₄ Short Polling
Chọn kỹ thuật rồi nhấn "Bước tiếp" để xem mô phỏng timeline.
– Số request / 4 giây
– Độ trễ nhận tin (điển hình)
– Băng thông 5.000 client (upload)
Kịch bản tính toán: 5.000 client, mỗi tin nhắn thực 20 byte, header HTTP = 650 byte (HTTP/1.1 không nén). WebSocket frame overhead = 2 byte/tin. Short polling chu kỳ 2 giây; long polling timeout 30 giây.

2. Nâng cấp HTTP → WebSocket (Handshake)

Mô phỏng từng bước bắt tay nâng cấp: từ TCP connect, HTTP Upgrade request, 101 Switching Protocols, đến kênh song công mở và tin nhắn hai chiều.

CLIENT SERVER t₀ t₁ t₂ t₃ t₄ t₅ CLOSED LISTEN KENH WEBSOCKET SONG CONG (ws://)
Sẵn sàng — Nhấn "Bước tiếp" để bắt đầu mô phỏng bắt tay nâng cấp HTTP → WebSocket.

3. Demo chat WebSocket song công

Mô phỏng hai client kết nối qua "server" ảo trong trình duyệt. Tin nhắn từ A lập tức xuất hiện ở B và ngược lại — không polling, không reload, không thêm request.

Client A (Alice)
Server Log
Client B (Bob)
Ghi chú: Đây là mô phỏng trong trình duyệt (không có server thật). "Server" ảo được implement bằng JavaScript thuần — hoạt động như WebSocket thật: nhận tin từ client, broadcast ngay đến tất cả client khác, ghi log. Tin nhắn đến ngay lập tức (0 ms delay mô phỏng), không qua polling.

4. Giải mã khung (frame) WebSocket

Nhập nội dung tin nhắn và chọn hướng gửi. Viz sẽ sinh ra khung WebSocket thực tế (hex + binary) và giải thích từng trường.

Đang tính...