必须启用SSE协议并配置前后端链路：确认Dify控制台「流式响应」开关开启，API地址正确，反向代理支持长连接；前端用fetch+ReadableStream（非EventSource或axios），解析data: JSON，区分event类型，安全追加DOM，实现指数退避重连。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要在Dify中让大模型输出像ChatGPT那样逐字出现、秒级可见，必须启用Server-Sent Events（SSE）协议并正确配置前后端交互链路。这不只是勾选一个开关，而是涉及API调用方式、响应头识别、数据解析逻辑三者的协同生效。
确认Dify后端已启用SSE支持
登录Dify控制台 → 进入「应用设置」→ 点击左侧菜单「API访问」→ 查看「流式响应」开关状态。该开关默认开启，但若被手动关闭，【所有API请求将退化为传统同步响应，无法触发任何流式行为】。
检查当前应用的API基础URL是否为官方托管地址（如 https://api.dify.ai/v1）或你自部署的、已启用SSE中间件的后端服务。自建Dify实例需确保Nginx/Apache反向代理配置中未强制关闭长连接，尤其要移除 proxy_buffering on; 和 proxy_cache 相关指令。
前端发起符合SSE规范的HTTP请求
方法一：使用原生 EventSource（仅限GET场景）
在浏览器环境中，若Dify API提供 /stream 接口（如 /v1/chat-messages/{message_id}/stream），可直接构造：const es = new EventSource('/v1/chat-messages/msg_abc123/stream?api_key=sk-xxx');
方法二：使用 fetch + ReadableStream（推荐，支持POST+认证）
第一步：设置请求头 Accept: text/event-stream，并携带 Authorization 与 Content-Type；
第二步：调用 response.body.getReader() 获取流读取器，【绝不能调用 response.json() 或 response.text()，否则会提前消费整个响应体，彻底破坏流式特性】；
第三步：循环调用 reader.read()，对每次返回的 chunk 使用 TextDecoder 解码，再按 \n 分割逐行扫描。
方法三：使用 axios（需额外处理）
axios 默认不支持流式响应，必须显式设置 responseType: 'stream' 并配合 Node.js 的 stream 模块——但这不适用于浏览器环境。因此在网页端，请放弃 axios 流式方案，改用原生 fetch。
解析SSE数据流中的关键事件类型
第一步：识别 data: 行并提取JSON内容
每条有效消息以 data: 开头，后接完整JSON字符串（可能跨多行）。遇到空行时，才将累积的所有 data: 内容拼成单个JSON对象进行 parse。
第二步：区分 event 字段值
常见 event 类型包括 text、text_chunk、agent_final、error、done。其中 text 和 text_chunk 对应可渲染文本片段；agent_final 表示最终结果定稿；error 需立即中断流并提示用户；done 是服务端主动关闭连接的信号。
第三步：安全追加到DOM
使用 element.textContent += parsedData.text 或 parsedData.data.text，【严禁使用 innerHTML +=，防止未过滤的模型输出注入脚本】。若需富文本支持，须先对 content 做白名单HTML转义，不可直接信任模型返回的 markup。
第四步：处理连接异常与重连
监听 EventSource 的 error 事件，或 fetch 流中 reader.read() 抛出的 TypeError。首次失败后等待1秒重试，第二次失败后等待2秒，第三次失败后等待4秒——实现指数退避。同时检查响应头中的 Last-Event-ID，用于断点续传（Dify部分版本已支持）。
