前端AI开发：为什么选择SSE，它与分块传输编码有何不同？axios能处理SSE吗？

donecoding
4 阅读8分钟

在AI大潮席卷前端的今天，如何优雅地实现"打字机"效果的流式响应？axios的onDownloadProgress能帮我们吗？本文将为你揭开迷雾。

引言：AI时代的实时数据流挑战

最近在开发一个AI助手功能时，我遇到了这样的需求：用户输入问题后，需要实时接收AI的流式响应，实现逐字打印效果。最初我尝试使用axios配合onDownloadProgress回调，却发现无法达到预期效果。经过一番探索，我发现这背后涉及SSE（Server-Sent Events）、分块传输编码等核心概念。今天，就和大家分享一下我的学习心得。

一、为什么前端AI开发偏爱SSE？

1.1 AI场景的独特需求

在AI应用开发中，我们常常需要处理以下场景：

  • ChatGPT式的对话响应（逐字输出）
  • 代码生成的实时展示
  • AI绘画的过程更新
  • 语音识别的实时转写

这些场景都有一个共同特点：数据是连续产生的，需要实时展示给用户。

1.2 SSE的天然优势

SSE正是为这类场景量身定制的：

javascript

// 使用EventSource的简单示例
const eventSource = new EventSource('/api/ai/chat');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 实时更新UI，实现逐字输出效果
  updateChatUI(data.text);
};

SSE的核心优势：

优势说明AI场景价值
实时性服务器可以随时推送数据AI响应立即显示，无需等待完整生成
自动重连内置断线重连机制网络不稳定时自动恢复，提升用户体验
轻量级基于HTTP，无需额外协议部署简单，兼容性好
文本友好原生支持文本数据格式AI生成的文本、JSON数据直接传输

1.3 对比其他方案的不足

javascript

// 传统轮询方式 - 不适用于AI流式响应
setInterval(async () => {
  const response = await fetch('/api/ai/status');
  const data = await response.json();
  if (data.hasUpdate) {
    // 问题：延迟高，资源浪费
  }
}, 1000);

// WebSocket - 功能过载，实现复杂
const ws = new WebSocket('wss://api.example.com');
ws.onmessage = (event) => {
  // 虽然可以实时通信，但对于单向AI响应过于重量级
};

二、核心概念：SSE vs 分块传输编码

这是最容易混淆的一对概念，让我们彻底搞懂它们。

2.1 分块传输编码（Chunked Transfer Encoding）

定义：HTTP协议层面的一种数据传输机制，允许服务器在不知道内容总长度的情况下分块发送数据。

工作原理：

text

HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

5\r\n
Hello\r\n
6\r\n
World!\r\n
0\r\n
\r\n

特点：

  • 协议层面的机制
  • 只是如何传输数据，不关心数据是什么
  • 每个块包含大小和数据两部分

2.2 SSE（Server-Sent Events）

定义：基于HTTP的应用层协议，专门用于服务器向客户端推送事件。

工作原理：

text

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

event: message
data: {"chunk": "Hello", "index": 1}

data: This is a 
data: multi-line message

event: complete
data: {"status": "done"}

特点：

  • 应用层协议
  • 有明确的数据格式规范
  • 支持事件类型、重连时间、消息ID等元数据

2.3 关键区别对比表

维度分块传输编码SSE
协议层级HTTP传输层机制应用层协议
数据格式无特定格式固定格式（data:, event:, id:, retry:）
内容类型任何Content-Type必须是text/event-stream
浏览器支持自动处理，无专门API通过EventSource API
消息边界按块大小分割按双换行符(\n\n)分割
适用场景任何需要流式传输的场景服务器向客户端推送事件

2.4 实际关系

重要洞察：SSE通常使用分块传输编码作为其底层传输机制，但它们解决的问题不同：

  • 分块传输编码解决"如何流式传输"
  • SSE解决"如何解析流式传输的事件数据"

javascript

// 模拟SSE底层使用分块传输编码
// 服务器端逻辑
app.get('/stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'Transfer-Encoding': 'chunked'  // 使用分块传输编码
  });
  
  // 发送SSE格式的数据块
  res.write('data: First chunk\n\n');
  setTimeout(() => {
    res.write('data: Second chunk\n\n');
  }, 1000);
});

三、axios能用来请求SSE吗？

直接答案：不能直接使用，axios不是为SSE设计的。

3.1 为什么axios不支持SSE？

axios的核心限制：

javascript

// 尝试用axios处理SSE - 这是错误的！
axios.get('/api/ai/stream', {
  responseType: 'stream' // Node.js环境可能有，浏览器环境不支持
})
.then(response => {
  // 问题1：axios会等待完整响应
  // 问题2：没有原生的SSE解析能力
  console.log(response.data); // 一次性拿到所有数据
});

根本原因分析：

  1. 设计目标不同

    • axios：设计用于完整的请求-响应周期
    • SSE：设计用于持久的单向数据流

  2. 底层技术限制

    javascript

    // axios在浏览器端的底层实现
// 基于XMLHttpRequest或Fetch API
// 但axios封装层没有暴露流式访问接口

// XMLHttpRequest的局限性
const xhr = new XMLHttpRequest();
xhr.onprogress = (event) => {
  // 只能在readyState=3时获取部分数据
  // 但无法实时处理，且需要手动解析
};

  3. API不匹配

    • axios的Promise模型假设请求会"完成"
    • SSE连接理论上可以永远不关闭

3.2 onDownloadProgress能接收chunk吗？

部分可以，但不适合SSE场景。

让我们深入分析onDownloadProgress的工作原理：

javascript

axios.get('/api/data', {
  onDownloadProgress: (progressEvent) => {
    console.log('Loaded:', progressEvent.loaded);
    console.log('Total:', progressEvent.total);
    
    // 关键问题：我们能拿到原始数据吗？
    // 答案：不能直接通过这个回调获取
  }
});

onDownloadProgress的局限性：

  1. 只有进度信息，没有数据内容

    javascript

    // onDownloadProgress事件对象结构
{
  lengthComputable: true,  // 总大小是否可知
  loaded: 1024,           // 已加载字节数
  total: 2048             // 总字节数（如果已知）
  // 注意：没有包含实际数据的字段！
}

  2. 数据已由axios内部处理

    javascript

    // axios内部处理流程
// 1. 接收网络数据 → 2. 触发onDownloadProgress → 3. 缓冲数据 → 4. 完成请求 → 5. 返回完整数据

// 这意味着：在onDownloadProgress触发时，数据已经被axios接管
// 我们无法在过程中访问数据块

  3. 无法实时处理分块数据

    javascript

    // 假设我们想实时显示AI响应
// 错误的方式：
axios.get('/api/ai/stream', {
  onDownloadProgress: (progress) => {
    // 这里无法获取到文本内容
    // 无法实现逐字显示效果
  }
});

3.3 验证实验：onDownloadProgress的真实能力

我创建了一个测试来验证onDownloadProgress的实际行为：

javascript

// 测试服务器：发送慢速数据流
app.get('/test-stream', (req, res) => {
  res.setHeader('Content-Type', 'text/plain');
  
  const sentences = [
    "Hello, ",
    "this is ",
    "a chunked ",
    "response.",
    " And it's ",
    "coming in ",
    "multiple parts."
  ];
  
  let index = 0;
  const interval = setInterval(() => {
    if (index < sentences.length) {
      res.write(sentences[index]);
      index++;
    } else {
      clearInterval(interval);
      res.end();
    }
  }, 500);
});

// 客户端测试
axios.get('/test-stream', {
  onDownloadProgress: (progressEvent) => {
    console.log('Progress:', progressEvent.loaded);
    // 关键发现：progressEvent不包含接收到的文本
    // 我们无法在这里实时显示数据
  }
}).then(response => {
  console.log('完整响应:', response.data);
  // 只能在这里一次性获取所有数据
});

测试结论：onDownloadProgress只适合显示下载进度条，不适合处理流式数据内容。

四、如何正确实现前端AI的SSE请求？

既然axios不行，我们应该用什么？以下是几种推荐方案：

4.1 方案一：使用原生EventSource（最简单）

javascript

class AISSEConnection {
  constructor(url, options = {}) {
    this.url = url;
    this.eventSource = null;
    this.messageBuffer = '';
    
    this.onMessage = options.onMessage || (() => {});
    this.onError = options.onError || (() => {});
    this.onComplete = options.onComplete || (() => {});
  }
  
  connect() {
    this.eventSource = new EventSource(this.url);
    
    this.eventSource.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        this.onMessage(data);
      } catch (e) {
        console.error('解析SSE数据失败:', e);
      }
    };
    
    this.eventSource.addEventListener('error', (event) => {
      console.error('SSE连接错误:', event);
      this.onError(event);
    });
    
    // 自定义事件
    this.eventSource.addEventListener('complete', (event) => {
      this.onComplete(JSON.parse(event.data));
      this.close();
    });
  }
  
  close() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
}

// 使用示例
const aiConnection = new AISSEConnection('/api/ai/chat', {
  onMessage: (data) => {
    document.getElementById('response').textContent += data.chunk;
  }
});

局限性：EventSource不支持自定义请求头，这在需要认证的API中是个问题。

4.2 方案二：使用Fetch API（最灵活）

javascript

async function* createSSEStream(url, options = {}) {
  const response = await fetch(url, {
    method: options.method || 'GET',
    headers: {
      'Accept': 'text/event-stream',
      'Content-Type': 'application/json',
      ...options.headers,
    },
    body: options.body ? JSON.stringify(options.body) : undefined,
  });
  
  if (!response.ok || !response.body) {
    throw new Error(`SSE请求失败: ${response.status}`);
  }
  
  const reader = response.body
    .pipeThrough(new TextDecoderStream())
    .getReader();
  
  let buffer = '';
  
  try {
    while (true) {
      const { done, value } = await reader.read();
      
      if (done) {
        // 处理缓冲区剩余数据
        if (buffer.trim()) {
          yield* parseSSEChunks(buffer);
        }
        break;
      }
      
      buffer += value;
      const chunks = buffer.split('\n\n');
      buffer = chunks.pop() || ''; // 最后一个可能是不完整的块
      
      for (const chunk of chunks) {
        if (chunk.trim()) {
          yield* parseSSEChunks(chunk);
        }
      }
    }
  } finally {
    reader.releaseLock();
  }
}

function* parseSSEChunks(rawChunk) {
  const lines = rawChunk.split('\n');
  let event = { type: 'message', data: '' };
  
  for (const line of lines) {
    if (line.startsWith('event:')) {
      event.type = line.replace('event:', '').trim();
    } else if (line.startsWith('data:')) {
      event.data += line.replace('data:', '').trim() + '\n';
    } else if (line.startsWith('id:')) {
      event.id = line.replace('id:', '').trim();
    } else if (line.startsWith('retry:')) {
      event.retry = parseInt(line.replace('retry:', '').trim(), 10);
    }
  }
  
  event.data = event.data.trim();
  if (event.data) {
    // 处理特殊结束标记
    if (event.data === '[DONE]') {
      yield { type: 'done' };
    } else {
      try {
        yield { ...event, data: JSON.parse(event.data) };
      } catch (e) {
        yield { ...event }; // 返回原始数据
      }
    }
  }
}

// 使用示例
async function handleAIStream(prompt) {
  for await (const event of createSSEStream('/api/ai/chat', {
    method: 'POST',
    body: { prompt }
  })) {
    switch (event.type) {
      case 'message':
        updateChatUI(event.data.chunk);
        break;
      case 'complete':
        console.log('AI响应完成:', event.data);
        break;
      case 'done':
        console.log('流结束');
        break;
    }
  }
}

4.3 方案三：使用专门的事件流库（最省心）

javascript

// 使用eventsource-parser库
import { createParser } from 'eventsource-parser';

async function streamAIResponse(url, options) {
  const response = await fetch(url, options);
  const parser = createParser({
    onEvent: (event) => {
      if (event.data === '[DONE]') {
        console.log('Stream completed');
        return;
      }
      
      try {
        const data = JSON.parse(event.data);
        // 处理AI响应数据
        onDataReceived(data);
      } catch (e) {
        console.error('Failed to parse SSE data:', e);
      }
    },
    onError: (error) => {
      console.error('SSE parser error:', error);
    }
  });
  
  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);
    parser.feed(chunk);
  }
}

五、实战：在React中实现AI聊天组件

让我们用一个完整的React组件来演示最佳实践：

jsx

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

function AIChatComponent() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const abortControllerRef = useRef(null);
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
    
    const userMessage = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);
    
    // 添加初始AI消息（空内容）
    const aiMessageId = Date.now();
    setMessages(prev => [...prev, { 
      id: aiMessageId, 
      role: 'assistant', 
      content: '' 
    }]);
    
    // 创建可中止的请求
    abortControllerRef.current = new AbortController();
    
    try {
      const response = await fetch('/api/ai/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'text/event-stream',
        },
        body: JSON.stringify({ message: input }),
        signal: abortControllerRef.current.signal,
      });
      
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n\n');
        buffer = lines.pop() || '';
        
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const data = line.replace('data: ', '');
            if (data === '[DONE]') break;
            
            try {
              const parsed = JSON.parse(data);
              // 更新AI消息内容
              setMessages(prev => prev.map(msg => 
                msg.id === aiMessageId 
                  ? { ...msg, content: msg.content + parsed.chunk }
                  : msg
              ));
            } catch (e) {
              console.warn('Failed to parse chunk:', e);
            }
          }
        }
      }
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Stream error:', error);
      }
    } finally {
      setIsLoading(false);
      abortControllerRef.current = null;
    }
  };
  
  const stopGeneration = () => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      setIsLoading(false);
    }
  };
  
  // 清理函数
  useEffect(() => {
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);
  
  return (
    <div className="ai-chat">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={isLoading}
          placeholder="输入您的问题..."
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? '生成中...' : '发送'}
        </button>
        {isLoading && (
          <button type="button" onClick={stopGeneration}>
            停止生成
          </button>
        )}
      </form>
    </div>
  );
}

六、总结与最佳实践

6.1 核心要点回顾

  1. SSE是AI前端开发的理想选择：专门为服务器推送设计，轻量且实时
  2. SSE ≠ 分块传输编码：SSE是应用层协议，分块传输是传输机制
  3. axios不适合SSE场景：设计目标不同，无法实时处理流式数据
  4. onDownloadProgress不能接收数据内容：只提供进度信息，不包含实际数据

6.2 技术选型建议

场景推荐方案理由
简单AI对话EventSource原生支持，实现简单
需要认证的AI服务Fetch API + 手动解析支持自定义请求头
复杂企业应用专门的事件流库健壮性好，功能完整
需要中止请求Fetch API + AbortController支持用户中断生成

6.3 性能优化建议

javascript

// 1. 添加连接状态管理
class ConnectionManager {
  constructor() {
    this.connections = new Map();
    this.reconnectAttempts = new Map();
  }
  
  getConnection(url) {
    if (!this.connections.has(url)) {
      this.createConnection(url);
    }
    return this.connections.get(url);
  }
  
  createConnection(url) {
    const connection = new EventSource(url);
    this.setupReconnectionLogic(url, connection);
    this.connections.set(url, connection);
  }
}

// 2. 添加数据缓冲和防抖
function createDebouncedStreamHandler(delay = 50) {
  let buffer = [];
  let timeout = null;
  
  return (chunk, callback) => {
    buffer.push(chunk);
    
    if (timeout) clearTimeout(timeout);
    
    timeout = setTimeout(() => {
      callback(buffer.join(''));
      buffer = [];
    }, delay);
  };
}

6.4 未来展望

随着Web技术的发展，我们可能有更多选择：

  • WebTransport：正在发展的新协议，支持可靠和不可靠的数据传输
  • WebSocket with Streams API：结合流式API的WebSocket使用
  • QUIC/HTTP3：下一代HTTP协议，原生支持多路复用

但在当前阶段，SSE仍然是前端AI开发中最实用、最成熟的实时数据流方案。

最后思考：技术选型没有绝对的对错，只有适合与不适合。理解每种技术的设计初衷和适用场景，才能做出最佳选择。在AI前端开发的道路上，SSE只是起点，未来还有更多可能性等待我们探索。

avatar
文章
阅读
粉丝