必须区分服务端真实sse流式与前端模拟打字机效果：前者用eventsource监听message事件解析data并滚动到底部，后者用fetch+setinterval逐字渲染；需确认后端返回text/event-stream且含\n\n结尾，前端trim后解析，并用textcontent防xss。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在网页端让豆包AI接口返回的流式数据呈现自然的打字机效果，必须区分服务端真实流式（SSE）与前端模拟流式两种路径——前者依赖浏览器原生 EventSource，后者靠定时器逐字追加，二者渲染逻辑、错误处理、中断控制完全不同。
确认后端是否真正支持 SSE 流式输出
打开浏览器开发者工具 → Network 面板 → 发起一次豆包 API 请求 → 找到对应请求 → 点击进入 → 切换到 “EventStream” 或 “Preview” 标签页。如果看到连续滚动的 data: {...}\n 格式内容，说明后端已正确启用 SSE；若只看到一次性 JSON 响应，则后端实际未开启 stream=true，此时强行用 EventSource 会失败或卡住。
豆包官方 API 默认不开启流式，需在请求体中显式传入 【"stream": true】 字段，且服务端必须设置 Content-Type: text/event-stream，否则前端 EventSource 无法解析。
方法一：用 EventSource 接收真实 SSE 流并实时渲染
第一步：创建 EventSource 实例，URL 必须是 HTTPS 协议（HTTP 仅限 localhost），且后端响应头含 Cache-Control: no-cache、Connection: keep-alive、X-Accel-Buffering: no（Nginx 环境必备）。
第二步：监听 message 事件，对 e.data 做 JSON.parse() 解析。注意豆包流式 chunk 中 content 字段可能为空字符串或 null，需跳过此类无效块，否则界面会插入空白字符。
第三步：将解析出的 content 字符串拼接到 DOM 元素 innerHTML 后，立即执行 element.scrollTop = element.scrollHeight 强制滚动到底部。这一步不能省略，否则新内容出现但用户看不到。
Doubao-Seedream-5.0-lite是字节跳动发布的最新图像创作模型。该模型首次搭载联网检索功能，能融合实时网络信息，提升生图时效性。同时，模型的聪明度进一步升级，能够精准解析复杂指令和视觉内容。此外，模型在世界知识广度、参考一致性及专业场景生成质量上均有增强，可更好地满足企业级视觉创作需求。
方法二：后端不支持 SSE 时，前端模拟打字机效果
先发起普通 fetch 请求获取完整响应文本，再用 setInterval 按 30ms 间隔逐字写入显示区域。
关键点在于：必须提前锁定当前消息容器的 DOM 引用或数组索引，否则多次调用 setInterval 可能导致不同消息混写。例如用 data-msg-id 属性标记容器，或在 messages 数组中固定 msgIndex 下标。
每次截取 fullText.substring(0, currentIndex++) 后，直接赋值给元素的 textContent，不要用 innerHTML —— 否则用户输入的 符号会被误解析为 HTML 标签，造成 XSS 风险或显示异常。
处理断行与乱码的核心操作
服务端返回的每个 data: 块末尾必须带 \n（换行符），且整个响应体以 \n\n 结尾，这是 SSE 协议强制要求。漏掉会导致浏览器无法识别消息边界，出现粘包或丢字。
前端接收时，对每块 e.data 执行 trim() 再 JSON.parse()，否则开头空格或结尾换行会引发 SyntaxError。豆包部分流式响应会在 content 字段外多包一层 choices → delta → content，需按实际结构路径取值，不能硬写 data.content。
字体选用等宽字体如 'SF Mono', 'Consolas', 'monospace'，避免中文与英文宽度不一致导致光标错位。CSS 中禁用 white-space: nowrap，否则长句不会自动折行，撑破容器。
