Server-Sent Events (SSE) vs WebSocket: Lựa chọn giao thức thời gian thực cho tính năng AI Streaming

Khi AI sinh từng chữ (Streaming Token): Chọn công nghệ nào?#

Khi trải nghiệm các ứng dụng AI như ChatGPT hay Claude, người dùng rất thích hiệu ứng chữ chạy ra liên tục từng từ (Typewriter effect) thay vì phải ngồi chờ 10 giây trước một màn hình loading đơ cứng.

Để truyền tải luồng token thời gian thực từ server về trình duyệt, bạn có 2 lựa chọn: Server-Sent Events (SSE) hoặc WebSocket.

Rất nhiều kỹ sư mặc định chọn WebSocket, nhưng liệu đó có phải là quyết định tối ưu?

So sánh cốt lõi giữa SSE và WebSocket#

1. WebSocket (Giao thức TCP hai chiều - Full Duplex)#

• Cơ chế: Nâng cấp kết nối HTTP lên giao thức TCP riêng biệt (ws://), cho phép cả client và server cùng gửi dữ liệu cho nhau liên tục.
• Thế mạnh: Chat 2 chiều tốc độ cao, Game online nhiều người chơi, Bảng giá chứng khoán cập nhật liên tục.
• Điểm yếu: Khó đi qua các tường lửa doanh nghiệp và proxy, không hỗ trợ HTTP/2 multiplexing, phức tạp khi cấu hình load balancer.

2. Server-Sent Events (Giao thức HTTP một chiều - Server-to-Client)#

• Cơ chế: Là một kết nối HTTP thông thường giữ trạng thái mở (Content-Type: text/event-stream). Server chỉ việc đẩy dữ liệu một chiều về cho client.
• Thế mạnh:
  • Hoạt động tự nhiên trên nền tảng HTTP/2 (tiết kiệm kết nối TCP).
  • Tích hợp sẵn cơ chế Tự động kết nối lại (Auto-reconnect) khi rớt mạng mà không cần viết code phụ trợ.
  • Vượt qua mọi tường lửa, proxy và CDN dễ dàng.

Code mẫu Client nhận luồng AI Streaming bằng Fetch API#

async function streamAIResponse(prompt: string) {
  const response = await fetch('/api/chat/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt }),
  });

  const reader = response.body?.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader!.read();
    if (done) break;

    const chunk = decoder.decode(value);
    console.log('Token vừa nhận được:', chunk);
    // Cập nhật text vào UI ngay lập tức
  }
}

Kết luận kiến trúc#

Đối với tính năng AI Token Streaming: Client chỉ gửi prompt 1 lần duy nhất, sau đó chỉ việc ngồi nghe server đẩy token về. SSE là giải pháp hoàn hảo, nhẹ nhàng và ổn định hơn WebSocket gấp nhiều lần!

Góc thảo luận#

Ứng dụng AI của bạn đang truyền luồng bằng SSE hay WebSocket? Bạn có gặp vấn đề buffer gói tin khi đi qua Nginx hoặc Cloudflare không?

Xem thêm nội dung liên quan:

• Từ điển AI: Large Language Model là gì?
• Review công cụ Claude AI