HTTP/2 truyền tài nguyên tĩnh, SSE truyền dữ liệu

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
  • sinh ra rồi gửi
  • 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

Thẻ: HTTP/2 SSE Server-Sent Events WebSockets

Đăng vào ngày 2 tháng 6 lúc 23:37