Streaming 流式输出教程

实时获取 AI 生成内容,提升用户体验

实时演示

点击上方按钮开始演示流式输出效果

快速响应

用户无需等待全部内容生成完成

实时反馈

看到内容逐步生成的过程

灵活处理

可以随时中断或处理部分内容

代码示例

Python 实现

import openai

# 配置 API
openai.api_key = "YOUR_API_KEY"
openai.api_base = "https://api.example.com/v1"

# 创建流式请求
response = openai.ChatCompletion.create(
    model="gpt-4o",
    messages=[
        {"role": "user", "content": "写一篇关于 AI 的文章"}
    ],
    stream=True,  # 启用流式输出
    temperature=0.7
)

# 处理流式响应
for chunk in response:
    if chunk.choices[0].delta.get('content'):
        print(chunk.choices[0].delta['content'], end='', flush=True)

JavaScript EventSource

// 使用 EventSource 处理 SSE
const evtSource = new EventSource('/api/stream');

evtSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    
    if (data.choices[0].delta?.content) {
        // 实时显示内容
        document.getElementById('output').innerHTML += data.choices[0].delta.content;
    }
    
    if (data.choices[0].finish_reason === 'stop') {
        evtSource.close();
    }
};

evtSource.onerror = (error) => {
    console.error('Stream error:', error);
    evtSource.close();
};

Fetch API 处理

// 使用 fetch API 处理流
const response = await fetch('/api/chat', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        model: 'gpt-4o',
        messages: [{ role: 'user', content: prompt }],
        stream: true
    })
});

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);
    const lines = chunk.split('\n');
    
    for (const line of lines) {
        if (line.startsWith('data: ')) {
            const data = JSON.parse(line.slice(6));
            if (data.choices[0].delta?.content) {
                // 处理流式内容
                handleStreamContent(data.choices[0].delta.content);
            }
        }
    }
}

SSE 格式说明

data: {"id":"chatcmpl-123","choices":[{"delta":{"content":"你"}}]}
data: {"id":"chatcmpl-123","choices":[{"delta":{"content":"好"}}]}
data: {"id":"chatcmpl-123","choices":[{"delta":{"content":"!"}}]}
data: {"id":"chatcmpl-123","choices":[{"finish_reason":"stop"}]}
data: [DONE]