DeepSeek API支持流式输出吗?前端显示实时效果教程

梦明君_4305

梦明君_4305

2026-05-11

884人浏览

原创

deepseek api支持流式输出,可通过eventsource接收sse、fetch+readablestream手动解析、后端代理转发及处理特殊结构四步实现。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

deepseek api支持流式输出吗?前端显示实时效果教程

DeepSeek API确实支持流式输出,允许后端在生成响应过程中持续向前端推送文本片段,从而实现类似真人打字的实时显示效果。以下是实现该效果的具体操作路径:

一、使用EventSource接收SSE流式响应

EventSource是浏览器原生支持的Server-Sent Events客户端API,专为接收单向、持续的服务器推送数据而设计。它自动处理连接重连、解析data:前缀行,并触发onmessage事件,适合对接DeepSeek返回的text/event-stream格式响应。

1、确保后端代理接口返回Content-Type为text/event-stream,且每行以data:开头并包含合法JSON对象。

2、在前端JavaScript中创建EventSource实例,传入代理接口URL(不可直接请求DeepSeek官方域名,因存在跨域及响应头限制)。

3、监听onmessage事件,在回调函数中调用JSON.parse(e.data)提取content字段值。

4、将每次获取的content字符串追加至目标DOM元素的textContent中,并启用CSS打字机动画增强视觉反馈。

二、使用fetch + ReadableStream手动解析流

当需要携带认证凭证(如Bearer Token)、自定义请求头或绕过同源策略限制时,fetch配合ReadableStream是更灵活的选择。该方式不依赖EventSource,可完全控制连接生命周期与数据解码逻辑。

1、调用fetch发起POST请求,请求体中必须包含stream: true参数,并在headers中设置Authorization和Accept为text/event-stream。

2、获取response后,调用response.body.getReader()获得流读取器。

3、使用while循环持续调用reader.read(),每次返回{done, value},其中value为Uint8Array类型字节流。

4、通过new TextDecoder().decode(value)将字节流转为字符串,按换行符\n分割后逐行处理,跳过空行及非data:行。

One API key for 70+ AI models. Route to GPT, Claude, Gemini, Qwen, Deepseek, Grok and more
One API key for 70+ AI models. Route to GPT, Claude, Gemini, Qwen, Deepseek, Grok and more

统一LLM网关 - 一个API对接70+AI模型,使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。

下载

5、对剩余行执行JSON.parse(),从中提取delta?.content或choices?.[0]?.delta?.content字段内容并拼接渲染。

三、后端代理层配置SSE转发

由于浏览器直连DeepSeek API不满足SSE规范(缺少必要响应头、跨域拒绝),必须部署中间代理服务。该代理负责转发请求、注入标准SSE头部,并将原始响应流重新封装为合规格式。

1、代理接口响应头中必须包含:Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive。

2、代理接收DeepSeek原始响应后,需将每块JSON响应包裹为data: {…}\n\n格式,末尾添加双换行符。

3、若DeepSeek响应中断,代理应主动发送event: error\ndata: {“error”: “upstream_failed”}\n\n并关闭连接。

4、为防止前端长时间无响应,代理需设置超时机制,在30秒内未收到DeepSeek数据则主动终止流并返回完成信号。

四、处理流式数据中的特殊结构

DeepSeek流式响应中,content字段可能为空字符串或null,尤其在首帧或系统提示词阶段。前端需主动过滤无效片段,避免渲染空白或破坏排版节奏。

1、在解析每条data:消息后,检查JSON对象中是否存在delta字段,且delta.content是否为非空字符串。

2、忽略仅含role、finish_reason等元信息而无content的帧。

3、对连续出现的空content帧累计计数,超过3次即触发降级逻辑:暂停渲染并显示“AI正在思考…”提示。

4、当收到finish_reason为stop或length的最终帧时,停止追加内容并移除加载态样式。

大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2283

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4903

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6010

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5498

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

783

5

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2283

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4903

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6010

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5498

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程