解决从deepseek接口获取的流式响应输出到前端都是undefined的问题
你的前端 EventSource
代码遇到了 undefined
连续输出 的问题,通常是因为:
- AI 返回的内容被拆成了单个字符,导致前端
JSON.parse(event.data).content
获取到的是单个字符,而undefined
可能是因为某些数据块没有content
字段。 - 前端拼接字符串时,错误地处理了
undefined
值,导致undefined
被拼接到页面上。
✅ 解决方案
1️⃣ 修正后端(确保 AI 输出的是 “块” 而不是单个字符)
你的 AI 可能逐字符返回内容,需要在后端 合并成合理的块,然后以 SSE 格式输出:
import json
def generate_category_description(messages, client):
"""调用 DeepSeek API 并流式返回符合 SSE 格式的 JSON"""
response = client.chat.completions.create(
model="deepseek-chat",
messages=messages,
response_format={"type": "json_object"},
stream=True # 设置为 True,以便接收流式数据
)
buffer = "" # 临时存储数据,防止单字符输出
for chunk in response:
if not chunk.choices:
continue # 跳过空数据
content = chunk.choices[0].delta.content or "" # 取 AI 返回的内容
buffer += content # 逐步累积内容
if len(buffer) >= 10: # 只有在积累到 10 个字符后才发送
print(buffer, end='', flush=True) # 实时流式输出到控制台
yield f"data: {json.dumps({'content': buffer})}\n\n"
buffer = "" # 发送后清空 buffer
# 发送剩余的内容(如果有的话)
if buffer:
yield f"data: {json.dumps({'content': buffer})}\n\n"
2️⃣ 修正前端(处理 undefined
并正确拼接流式数据)
你的 EventSource
代码没有正确处理 undefined
,需要修正:
async function generateCategoryDesc() {
const eventSource = new EventSource("/generate_category_desc_stream");
let contentBuffer = ""; // 存储完整的内容
eventSource.onmessage = (event) => {
try {
console.log("Raw event data:", event.data);
const data = JSON.parse(event.data);
if (data.content) { // 确保 content 存在
contentBuffer += data.content; // 拼接完整内容
document.getElementById("editArea").innerHTML = contentBuffer; // 更新页面
}
} catch (err) {
console.error("JSON parse error:", err, "Raw event data:", event.data);
}
};
eventSource.onerror = (err) => {
console.error("EventSource failed:", err);
eventSource.close();
};
eventSource.onopen = () => {
console.log("SSE connection opened.");
};
}
🔥 关键修正
✅ 后端:
- 确保
buffer
缓冲字符,防止逐字符发送 - 积累到足够字符后才
yield
,防止前端undefined
乱拼接 - 如果 AI 只返回一个字符,后端会等到 10 个字符后才发送
✅ 前端:
- 检查
data.content
是否为undefined
,避免拼接undefined
- 修正
EventSource
解析逻辑,确保流式数据完整 - 修正
contentBuffer
逻辑,确保拼接的数据正确
🚀 结果
- 流式 AI 输出不会拆成单个字符
- 前端不会出现
undefined
- 文本会按块(10 字符)更新到
editArea
- AI 生成的内容仍然是流式的,不影响流式体验
现在试试看,你的 editArea
应该会正常流式更新,而不会出现 undefinedundefinedundefined
的问题了!