SSE là mô hình giao tiếp, HTTP/2 là phiên bản giao thức truyền tải SSE có thể hoạt động trên HTTP/1.1 hoặc HTTP/2
Mục đích sử dụng (tóm tắt ngắn gọn)
| Tính năng | HTTP/2 Server Push | SSE |
|---|---|---|
| Dùng để làm gì | **Tiền tải tài nguyên, tăng tốc tải trang** | **Gửi dữ liệu kinh doanh liên tục** |
| Tần suất gửi | Một lần | Liên tục / Thực tế |
| Kiểu dữ liệu | JS / CSS / Font | JSON / Văn bản / Sự kiện |
| Có phải thời gian thực không | ||
| Còn được khuyến khích không | Đã ngừng sử dụng | Vẫn được dùng phổ biến |
HTTP/2 Server Push - Chỉ thực hiện một nhiệm vụ duy nhất
Tối ưu hiệu suất tải trang
Ứng dụng tiêu biểu
Cho phép trình duyệt nhanh chóng nhận được tài nguyên sẽ được sử dụng ngay
Ví dụ phù hợp
Ví dụ 1: Tiền tải tài nguyên đầu trang (cách dùng cũ)
Yêu cầu từ client:
GET /index.html
Server gửi kèm:
/main.css
/runtime.js
/vendor.js
Lý thuyết giúp giảm thời gian phản hồi (RTT), tăng tốc độ hiển thị đầu trang
Ví dụ 2: Giao diện quản trị với phụ thuộc cố định
/dashboard.html
├── dashboard.css
├── chart.js
└── theme.css
Server gửi kèm các tài nguyên này khi trả về HTML
Tình huống không phù hợp
- Gửi dữ liệu kinh doanh (đơn hàng, tin nhắn, trạng thái)
- Cập nhật thời gian thực
- Chat, log, thông báo
Đây không phải mục đích thiết kế của nó
⚠️ Thông tin hiện tại (rất quan trọng)
- Chrome / Edge mặc định tắt
- HTTP/3 đã loại bỏ
- Không nên sử dụng trong dự án thực tế
SSE (Server-Sent Events) - Cơ chế "gửi dữ liệu từ server đến client" thực sự
Server gửi dữ liệu mới đến client khi có thay đổi
Ứng dụng thực tế của SSE + ví dụ (trọng tâm)
Ví dụ 1: Đầu ra luồng từ AI / mô hình lớn (đặc trưng nhất)
Người dùng đặt câu hỏi
Server sinh ra dữ liệu và gửi liên tục:
"Bạn"
"Bạn có thể"
"Bạn có thể làm như thế này..."
Tại sao dùng SSE?
- Truyền một chiều
- Trải nghiệm luồng tốt
- Dễ triển khai
Ví dụ 2: Tiến độ công việc nền sau
Đang nhập dữ liệu...
10%
25%
60%
100%
data: {"progress": 60}
- Tinh tế hơn nhiều so với polling
Ví dụ 3: Log thời gian thực / log xây dựng
[10:01] đang biên dịch...
[10:02] thành công
- Giao diện CI/CD
- Log hàm điện toán đám mây
- Log container
Ví dụ 4: Thông báo trạng thái đơn hàng
Đơn hàng đã thanh toán
Đơn hàng đã giao
Đơn hàng đã hoàn thành
Đặc điểm:
- Không cần client gửi tin nhắn
- Chỉ quan tâm đến thay đổi từ server
Ví dụ 5: Dữ liệu tài chính đơn giản
BTC: 43210
BTC: 43250
BTC: 43190
⚠️ Gợi ý: Trường hợp cập nhật thường xuyên nên dùng WebSocket, nhưng SSE phù hợp cho cập nhật ít
Ví dụ cơ bản sử dụng SSE (rõ ràng)
Client
const eventSource = new EventSource('/events');
eventSource.onmessage = (e) => {
console.log('Nhận được:', e.data);
};
Server Node.js
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
const timer = setInterval(() => {
res.write(`data: ${Date.now()}\n\n`);
}, 1000);
req.on('close', () => clearInterval(timer));
});
Bảng so sánh chọn giải pháp (sử dụng trực tiếp)
| Yêu cầu | Sử dụng gì |
|---|---|
| Tăng tốc tải trang | HTTP/2 |
| Thông báo kinh doanh thời gian thực | SSE |
| Luồng log / đầu ra AI | SSE |
| Tương tác hai chiều thời gian thực | WebSocket |
| Tối ưu tài nguyên | HTTP/2 / HTTP/3 |
Tóm tắt ngắn gọn (có thể nói trực tiếp với người khác)
HTTP/2 truyền "tài nguyên" SSE truyền "dữ liệu"
AI liên tục xuất ra, bản chất là gì?
Chỉ một câu:
Server gửi kết quả sinh ra liên tục trong một yêu cầu đến client
Điểm then chốt:
- Không phải trả về một lần
- Là sinh ra rồi gửi
- Là Dòng chảy HTTP Response
SSE có phải là cách AI xuất liên tục không? (quyết định nhất)
Trên trình duyệt: Thông thường là SSE
Vì SSE đáp ứng đầy đủ các nhu cầu của AI xuất luồng:
| Nhu cầu AI luồng | SSE có đáp ứng không |
|---|---|
| Một chiều (AI → Người dùng) | |
| Xuất liên tục | |
| Chủ yếu là văn bản | |
| Thực hiện đơn giản | |
| Hỗ trợ trình duyệt gốc | |
| Tự động reconnect khi ngắt |
Do đó bạn sẽ thấy:
- ChatGPT Web
- Các giao diện mô hình lớn
- Demo AI hỏi đáp
99% đều dùng SSE