应优先使用eventsource处理deepseek api的sse流式响应，若需自定义请求头则改用fetch+readablestream解析；通过textcontent增量更新dom并滚动锚定实现平滑渲染；同时需实现错误重试与中断恢复机制。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
一、使用EventSource建立SSE连接并监听data事件
EventSource对象专用于接收服务器发送事件（Server-Sent Events），适合处理DeepSeek API返回的流式text/event-stream响应。需确保API后端已正确设置Content-Type为text/event-stream，并持续写入格式合规的event: message、data: {...}块。
1、在前端JavaScript中创建EventSource实例，传入支持SSE的代理接口URL（注意：不能直接指向DeepSeek官方API，因其不支持跨域SSE且无event-stream响应头）。
2、为EventSource实例绑定onmessage事件处理器，该处理器会在每次接收到未命名event类型的消息时触发。
3、在onmessage回调中解析e.data字段，提取JSON字符串，使用JSON.parse()转换为对象，检查是否包含content字段。
立即学习“前端免费学习笔记（深入）”；
4、将解析出的content文本追加至目标DOM元素的innerHTML或textContent中，实现逐字/逐块渲染效果。
二、手动构建fetch + ReadableStream解析逻辑
当EventSource不可用（如需要自定义请求头、携带Bearer Token或绕过同源限制）时，可改用fetch发起POST请求，通过response.body.getReader()读取流式响应体。此方式要求后端返回纯text/plain或application/json流，且每行一个JSON对象或含content字段的片段。
1、调用fetch向后端代理接口发送POST请求，请求体中包含DeepSeek API所需的model、messages、stream: true等参数，并设置headers.Authorization为Bearer {your_api_key}。
2、等待response返回后，调用response.body.getReader()获取流读取器。
3、使用while循环配合reader.read()持续读取chunk，每次读取结果为{done, value}对象，value为Uint8Array类型字节流。
4、将value通过new TextDecoder().decode()转为字符串，按换行符\n分割，遍历每一行，跳过空行和data:前缀行，对剩余行尝试JSON.parse()。
5、成功解析后，提取delta?.content或choices?.[0]?.delta?.content字段值，使用document.getElementById('output').textContent += content动态更新显示区域。
三、创建DOM容器并启用增量渲染防闪烁
为避免频繁innerHTML重写导致布局抖动或光标错位，应预先创建一个固定容器，并采用textContent追加与滚动锚定结合的方式实现平滑流式输出。
1、在HTML中声明一个id为"stream-output"的
或<div>元素，设置CSS样式white-space: pre-wrap; overflow-y: auto; max-height: 400px;。
<p>2、为该元素添加scrollHeight监控逻辑，在每次追加内容后执行element.scrollTop = element.scrollHeight。</p>
<p>3、初始化时清空容器内容：document.getElementById('stream-output').textContent = '';</p>
<p>4、在流式数据处理循环内，每次获取新content后，执行<strong><font color="green">outputElement.textContent += content</font></strong>而非outputElement.innerHTML += content，防止XSS风险及标签解析干扰。</p>
<p>5、若需保留简单格式（如换行），可在追加前将content.replace(/\n/g, '\n')，并确保容器CSS支持pre-wrap。</p>
<h2>四、错误处理与连接中断恢复机制</h2>
<p>SSE连接可能因网络波动、服务端超时或CORS策略中断，需捕获error事件并提供重试能力，同时区分客户端错误与服务端错误响应。</p>
<p>1、为EventSource实例绑定onerror事件，判断e.target.readyState是否为0（关闭状态），若是则执行重连逻辑。</p>
<p>2、设置最大重试次数（如3次）和指数退避延迟（首次1s，二次3s，三次9s），使用setTimeout启动下一次new EventSource()调用。</p>
<p>3、在fetch流式方案中，捕获try/catch中的TypeError（网络中断）和AbortError（主动取消），并触发UI提示<strong><font color="green">“连接已断开，正在重试...”</font></strong>。</p>
<p>4、监听AbortController.signal，在页面卸载前调用controller.abort()，防止内存泄漏。</p>
<p>5、当接收到API返回的error字段（如{error: {message: "Invalid API key"}}），立即终止流读取并显示<strong><font color="green">“API密钥无效，请检查配置”</font></strong>。</p>
</div> 
