解决从deepseek接口获取的流式响应输出到前端都是undefined的问题

embedded/2025/3/18 22:59:34/

在这里插入图片描述
你的前端 EventSource 代码遇到了 undefined 连续输出 的问题,通常是因为:

  1. AI 返回的内容被拆成了单个字符,导致前端 JSON.parse(event.data).content 获取到的是单个字符,而 undefined 可能是因为某些数据块没有 content 字段。
  2. 前端拼接字符串时,错误地处理了 undefined,导致 undefined 被拼接到页面上。

✅ 解决方案

1️⃣ 修正后端(确保 AI 输出的是 “块” 而不是单个字符)

你的 AI 可能逐字符返回内容,需要在后端 合并成合理的块,然后以 SSE 格式输出:

import jsondef 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 的问题了!


http://www.ppmy.cn/embedded/173697.html

相关文章

Flutter 按钮组件 ElevatedButton 详解

目录 1. 引言 2. ElevatedButton 的基本用法 3. 主要属性 4. 自定义按钮样式 4.1 修改背景颜色和文本颜色 4.2 修改按钮形状和边框 4.3 修改按钮大小 4.4 阴影控制 4.5 水波纹效果 5. 结论 相关推荐 1. 引言 在 Flutter 中,ElevatedButton 是一个常用的…

低空经济腾飞:无人机送货、空中通勤,未来已来

近年来,低空经济逐渐成为社会关注的焦点。从无人机送货到“空中的士”,再到飞行培训的火热进行,低空经济正迎来前所未有的发展机遇。随着技术进步和政策支持,这一曾经看似遥远的未来场景,正逐步变为现实。 低空经济如何…

音视频处理的“瑞士军刀”与“积木”:FFmpeg 与 GStreamer 的深度揭秘

一、发展历史与生态演进对比 FFmpeg的成长轨迹 诞生背景:2000年由Fabrice Bellard创建,最初为解决视频编码标准化问题而生。早期版本仅支持MPEG-1编码,但凭借开源社区协作,迅速扩展为全格式编解码工具。技术扩张:2004年…

【RHCE实验】搭建主从DNS、WEB等服务器

目录 需求 环境搭建 配置nfs服务器 配置web服务器 配置主从dns服务器 主dns服务器 从dns服务器 配置客户端 客户端测试 需求 客户端通过访问 www.nihao.com 后,能够通过 dns 域名解析,访问到 nginx 服务中由 nfs 共享的首页文件,内容…

Vue中涉及的字符串模板与dom模板

Dom模板(或者称为Html模板)(非字符串的模板) 实际上,Dom 模板就是写在 html 文件中,一打开就会被浏览器进行解析渲染的,所以要遵循 html 结构和标签的命名,否则浏览器不解析也就不能获取内容了。 好了,今天的文章分享…

了解一下HTTP的短连接和长连接

在 HTTP 协议中,连接的方式主要分为长连接和短连接。这两种连接方式的主要区别在于连接的生命周期和数据传输的效率。理解它们的差异对于优化 Web 应用的性能和资源利用至关重要。以下是 HTTP 长连接和短连接的详细解释。 1. 短连接(HTTP/1.0&#xff0…

HCIA-11.以太网链路聚合与交换机堆叠、集群

链路聚合背景 拓扑组网时为了高可用,需要网络的冗余备份。但增加冗余容易后会出现环路,所以我们部署了STP协议来破除环路。 但是,根据实际业务的需要,为网络不停的增加冗余是现实需要的一部分。 那么,为了让网络冗余…

Python----数据分析(Pandas三:一维数组Series的数据操作:数据清洗,数据转换,数据排序,数据筛选,数据拼接)

一、数据清洗 1.1、dropna() 删除包含NaN值的行。 series.dropna(axis0, inplaceFalse) 描述说明axis可选参数,用于指定按哪个轴删除缺失值。对于 Series对象,因为它是 一维数据结构,只有一个轴,所以此参数默认值为0&#xff0…