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]