Server-Sent Events 实现 AI 实时流式输出：前端 Vue/React 组件开发完整指南

Case Study: Startup AI Chatbot Việt Nam — Từ Streaming Chậm Đến 180ms Latency

Một startup AI ở Hà Nội chuyên cung cấp chatbot hỗ trợ khách hàng cho các sàn thương mại điện tử đã gặp vấn đề nghiêm trọng với nhà cung cấp cũ. Hệ thống cũ sử dụng polling mechanism khiến UI bị "giật lag" mỗi khi chờ response, tỷ lệ timeout cao (15% mỗi ngày), và chi phí hạ tầng WebSocket leo thang không kiểm soát được.

Điểm đau thực tế của nhà cung cấp cũ:

• Streaming latency trung bình 420ms — khách hàng than phiền "đợi lâu quá"
• Hóa đơn hàng tháng $4,200 cho 200K requests
• Không hỗ trợ multi-region failover
• API key bị rate limit thường xuyên vào giờ cao điểm

Sau khi đánh giá nhiều providers, đội ngũ kỹ thuật quyết định di chuyển sang HolySheep AI với lý do: chi phí chỉ bằng 16% so với provider cũ ($680 vs $4,200), hỗ trợ WeChat/Alipay thanh toán thuận tiện, và đặc biệt là streaming latency dưới 180ms.

30 Ngày Sau Go-Live — Metrics Thực Tế

| Metric              | Trước (Provider Cũ) | Sau (HolySheep) | Cải thiện |
|---------------------|---------------------|-----------------|-----------|
| Avg Latency         | 420ms               | 180ms           | -57%      |
| Timeout Rate        | 15%                 | 0.3%            | -98%      |
| Monthly Cost        | $4,200              | $680            | -84%      |
| Concurrent Users    | 500                 | 2,000           | +300%     |
| Time to First Token | 800ms               | 95ms            | -88%      |

Server-Sent Events (SSE) Là Gì và Tại Sao Quan Trọng

Server-Sent Events là một HTTP-based protocol cho phép server push data đến client qua một single HTTP connection. Trong context AI streaming:

• Real-time response: User nhận được từng token ngay khi model generate
• Lower latency: Không cần chờ full response như traditional REST
• Resource efficiency: Chỉ một HTTP connection thay vì WebSocket overhead
• Automatic reconnection: Browser tự động reconnect nếu connection bị drop

HolySheep AI Streaming API — Cấu Hình Cơ Bản

Trước khi đi vào code chi tiết, đây là endpoint streaming của HolySheep:

POST https://api.holysheep.ai/v1/chat/completions
Authorization: Bearer YOUR_HOLYSHEEP_API_KEY
Content-Type: application/json

{
  "model": "gpt-4.1",
  "messages": [{"role": "user", "content": "Xin chào"}],
  "stream": true
}

Vue 3 Composition API — Streaming Component

Dưới đây là component hoàn chỉnh sử dụng Vue 3 Composition API với TypeScript:

<template>
  <div class="chat-container">
    <div class="messages" ref="messagesContainer">
      <div 
        v-for="(msg, index) in messages" 
        :key="index"
        :class="['message', msg.role]"
      >
        <div class="message-content" v-html="formatMarkdown(msg.content)"></div>
        <div class="message-meta">
          <span class="token-count">{{ msg.tokens || 0 }} tokens</span>
          <span class="timestamp">{{ formatTime(msg.timestamp) }}</span>
        </div>
      </div>
      
      <div v-if="isStreaming" class="message assistant streaming">
        <div class="cursor">█</div>
        <div class="message-content" v-html="formatMarkdown(currentStreamContent)"></div>
      </div>
    </div>
    
    <div class="input-area">
      <textarea
        v-model="userInput"
        @keydown.enter.exact.prevent="sendMessage"
        placeholder="Nhập tin nhắn của bạn..."
        rows="3"
      ></textarea>
      <button @click="sendMessage" :disabled="isStreaming || !userInput.trim()">
        {{ isStreaming ? 'Đang xử lý...' : 'Gửi' }}
      </button>
    </div>
    
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onUnmounted } from 'vue';

interface Message {
  role: 'user' | 'assistant';
  content: string;
  tokens?: number;
  timestamp: Date;
}

const messages = ref<Message[]>([]);
const userInput = ref('');
const currentStreamContent = ref('');
const isStreaming = ref(false);
const error = ref('');
const messagesContainer = ref<HTMLElement | null>(null);
let abortController: AbortController | null = null;

const HOLYSHEEP_API_KEY = 'YOUR_HOLYSHEEP_API_KEY';
const HOLYSHEEP_BASE_URL = 'https://api.holysheep.ai/v1';

const formatTime = (date: Date): string => {
  return date.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit' });
};

const formatMarkdown = (text: string): string => {
  return text
    .replace(/``(\w*)\n([\s\S]*?)``/g, '<pre><code>$2</code></pre>')
    .replace(/([^]+)`/g, '<code>$1</code>')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n/g, '<br>');
};

const scrollToBottom = async () => {
  await nextTick();
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

const sendMessage = async () => {
  if (!userInput.value.trim() || isStreaming.value) return;
  
  const userMessage: Message = {
    role: 'user',
    content: userInput.value.trim(),
    timestamp: new Date()
  };
  
  messages.value.push(userMessage);
  const inputCopy = userInput.value;
  userInput.value = '';
  currentStreamContent.value = '';
  isStreaming.value = true;
  error.value = '';
  
  abortController = new AbortController();
  
  try {
    const response = await fetch(${HOLYSHEEP_BASE_URL}/chat/completions, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': Bearer ${HOLYSHEEP_API_KEY}
      },
      body: JSON.stringify({
        model: 'gpt-4.1',
        messages: messages.value.map(m => ({ role: m.role, content: m.content })),
        stream: true
      }),
      signal: abortController.signal
    });
    
    if (!response.ok) {
      throw new Error(HTTP ${response.status}: ${response.statusText});
    }
    
    const reader = response.body?.getReader();
    if (!reader) throw new Error('Stream reader not available');
    
    const decoder = new TextDecoder();
    let fullContent = '';
    let totalTokens = 0;
    
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      const chunk = decoder.decode(value, { stream: true });
      const lines = chunk.split('\n');
      
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6);
          if (data === '[DONE]') continue;
          
          try {
            const parsed = JSON.parse(data);
            const content = parsed.choices?.[0]?.delta?.content || '';
            if (content) {
              fullContent += content;
              currentStreamContent.value = fullContent;
              totalTokens++;
              await scrollToBottom();
            }
          } catch (e) {
            // Ignore parse errors for incomplete chunks
          }
        }
      }
    }
    
    messages.value[messages.value.length - 1] = {
      ...messages.value[messages.value.length - 1],
      content: fullContent,
      tokens: totalTokens
    };
    
  } catch (err: any) {
    if (err.name === 'AbortError') {
      error.value = 'Yêu cầu đã bị hủy';
    } else {
      error.value = Lỗi kết nối: ${err.message};
      console.error('Streaming error:', err);
    }
  } finally {
    isStreaming.value = false;
    currentStreamContent.value = '';
    await scrollToBottom();
  }
};

const cancelStream = () => {
  if (abortController) {
    abortController.abort();
    abortController = null;
  }
};

onUnmounted(() => {
  cancelStream();
});
</script>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.messages {
  height: 500px;
  overflow-y: auto;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 16px;
}

.message {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 80%;
}

.message.user {
  background: #007bff;
  color: white;
  margin-left: auto;
}

.message.assistant {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}

.message-content {
  line-height: 1.6;
}

.message-meta {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
  display: flex;
  gap: 12px;
}

.streaming .cursor {
  animation: blink 1s infinite;
  display: inline-block;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.input-area {
  display: flex;
  gap: 12px;
}

.input-area textarea {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  resize: none;
  font-size: 14px;
}

.input-area button {
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.input-area button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.error-message {
  margin-top: 12px;
  padding: 12px;
  background: #fee;
  color: #c00;
  border-radius: 8px;
}
</style>

React 18 + TypeScript — Streaming Hook

Với React, tôi recommend tách logic thành custom hook để reuse được:

import { useState, useCallback, useRef } from 'react';

interface UseAIStreamOptions {
  apiKey: string;
  baseUrl?: string;
  model?: string;
  systemPrompt?: string;
}

interface StreamMessage {
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  tokens?: number;
}

interface UseAIStreamReturn {
  messages: StreamMessage[];
  isStreaming: boolean;
  error: string | null;
  sendMessage: (content: string) => Promise<void>;
  clearMessages: () => void;
  abort: () => void;
  totalTokens: number;
  totalCost: number;
}

const PRICING: Record<string, { input: number; output: number }> = {
  'gpt-4.1': { input: 8, output: 8 },        // $8 per 1M tokens
  'claude-sonnet-4.5': { input: 15, output: 15 },
  'gemini-2.5-flash': { input: 2.50, output: 2.50 },
  'deepseek-v3.2': { input: 0.42, output: 0.42 }
};

export function useAIStream({
  apiKey,
  baseUrl = 'https://api.holysheep.ai/v1',
  model = 'gpt-4.1',
  systemPrompt = 'Bạn là một trợ lý AI hữu ích.'
}: UseAIStreamOptions): UseAIStreamReturn {
  
  const [messages, setMessages] = useState<StreamMessage[]>([]);
  const [isStreaming, setIsStreaming] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [totalTokens, setTotalTokens] = useState(0);
  
  const abortControllerRef = useRef<AbortController | null>(null);
  
  const calculateCost = useCallback((tokens: number) => {
    const price = PRICING[model]?.output || 8;
    return (tokens / 1_000_000) * price;
  }, [model]);
  
  const sendMessage = useCallback(async (content: string) => {
    if (!content.trim() || isStreaming) return;
    
    const userMessage: StreamMessage = {
      role: 'user',
      content: content.trim(),
      timestamp: new Date()
    };
    
    setMessages(prev => [...prev, userMessage]);
    setIsStreaming(true);
    setError(null);
    
    abortControllerRef.current = new AbortController();
    
    const conversationHistory = [
      { role: 'system', content: systemPrompt },
      ...messages.map(m => ({ role: m.role, content: m.content })),
      { role: 'user', content: content.trim() }
    ];
    
    try {
      const response = await fetch(${baseUrl}/chat/completions, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': Bearer ${apiKey}
        },
        body: JSON.stringify({
          model: model,
          messages: conversationHistory,
          stream: true,
          temperature: 0.7,
          max_tokens: 4096
        }),
        signal: abortControllerRef.current.signal
      });
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.error?.message || HTTP ${response.status});
      }
      
      const reader = response.body?.getReader();
      if (!reader) throw new Error('Stream reader initialization failed');
      
      const decoder = new TextDecoder();
      let fullResponse = '';
      let tokenCount = 0;
      
      // UI state for streaming display
      let streamingContent = '';
      const updateInterval = setInterval(() => {
        setMessages(prev => {
          const newMessages = [...prev];
          const lastMsg = newMessages[newMessages.length - 1];
          if (lastMsg?.role === 'assistant') {
            lastMsg.content = streamingContent;
          }
          return newMessages;
        });
      }, 50);
      
      while (true) {
        const { done, value } = await reader.read();
        
        if (done) break;
        
        const chunk = decoder.decode(value, { stream: true });
        const lines = chunk.split('\n');
        
        for (const line of lines) {
          if (!line.startsWith('data: ')) continue;
          
          const data = line.slice(6);
          if (data === '[DONE]') continue;
          
          try {
            const parsed = JSON.parse(data);
            const delta = parsed.choices?.[0]?.delta?.content;
            
            if (delta) {
              streamingContent += delta;
              tokenCount++;
            }
          } catch {
            // Skip malformed JSON from chunked transfer
          }
        }
      }
      
      clearInterval(updateInterval);
      
      const assistantMessage: StreamMessage = {
        role: 'assistant',
        content: streamingContent,
        timestamp: new Date(),
        tokens: tokenCount
      };
      
      setMessages(prev => [...prev, assistantMessage]);
      setTotalTokens(prev => prev + tokenCount);
      
    } catch (err: any) {
      if (err.name !== 'AbortError') {
        setError(err.message || 'Đã xảy ra lỗi không xác định');
        console.error('AI Stream Error:', err);
      }
    } finally {
      setIsStreaming(false);
      abortControllerRef.current = null;
    }
  }, [apiKey, baseUrl, model, systemPrompt, messages, isStreaming]);
  
  const clearMessages = useCallback(() => {
    setMessages([]);
    setTotalTokens(0);
    setError(null);
  }, []);
  
  const abort = useCallback(() => {
    abortControllerRef.current?.abort();
    setIsStreaming(false);
  }, []);
  
  return {
    messages,
    isStreaming,
    error,
    sendMessage,
    clearMessages,
    abort,
    totalTokens,
    totalCost: calculateCost(totalTokens)
  };
}

React Component — ChatBox Implementation

import React, { useState, useRef, useEffect } from 'react';
import { useAIStream } from './useAIStream';

const HOLYSHEEP_API_KEY = 'YOUR_HOLYSHEEP_API_KEY';

interface ChatBoxProps {
  className?: string;
}

export const ChatBox: React.FC<ChatBoxProps> = ({ className }) => {
  const [inputValue, setInputValue] = useState('');
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  
  const {
    messages,
    isStreaming,
    error,
    sendMessage,
    clearMessages,
    abort,
    totalTokens,
    totalCost
  } = useAIStream({
    apiKey: HOLYSHEEP_API_KEY,
    baseUrl: 'https://api.holysheep.ai/v1',
    model: 'deepseek-v3.2',  // $0.42/MTok - best cost efficiency
    systemPrompt: 'Bạn là chuyên gia tư vấn thương mại điện tử Việt Nam. Hãy trả lời ngắn gọn, hữu ích.'
  });
  
  // Auto-scroll to bottom
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages, isStreaming]);
  
  // Auto-resize textarea
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = ${Math.min(textareaRef.current.scrollHeight, 150)}px;
    }
  }, [inputValue]);
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!inputValue.trim() || isStreaming) return;
    
    await sendMessage(inputValue);
    setInputValue('');
  };
  
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };
  
  const renderContent = (content: string) => {
    // Simple markdown parsing
    return content
      .split('\n')
      .map((line, i) => {
        if (line.startsWith('```')) {
          return <div key={i} className="code-block">{line}</div>;
        }
        return <span key={i}>{line}<br/></span>;
      });
  };
  
  return (
    <div className={chat-box ${className || ''}}>
Tài nguyên liên quan
📚 Hướng dẫn AI API
💰 Xem giá
📖 Tài liệu nhà phát triển
🚀 Đăng ký miễn phí
Bài viết liên quan
Multi-Model Intelligent Routing Architecture cho Ứng dụng So
印尼游戏工作室 AI NPC 对话：DeepSeek API 接入与延迟测试完整指南
AI 模型后门攻击防护：训练数据安全与供应链管理