要实现通义千问响应内容实时逐字呈现，需后端启用SSE流式响应并配置正确响应头、禁用缓冲、构造data:格式数据块；前端用EventSource或Fetch+ReadableStream接收解析；再通过requestAnimationFrame实现逐字打字机渲染；同时调用API时需设置stream:true并解析delta.content。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在调用通义千问模型时希望响应内容能实时逐字呈现，而非等待全部生成完毕再一次性返回，则需通过流式输出机制将服务端分块推送的文本片段，在前端按字符或语义单位逐步渲染。以下是实现该交互体验的具体方式：
一、后端启用SSE协议并配置流式响应
服务器需主动建立持久化HTTP连接，按SSE规范构造事件流，确保文本块以data:前缀格式持续写入且不关闭连接。该方式为浏览器原生支持，无需额外依赖，适合标准GET流式场景。
1、设置响应头：Content-Type为text/event-stream；Cache-Control为no-cache；Connection为keep-alive。
2、禁用缓冲：在Node.js中调用res.flush()或设置res.socket.setNoDelay(true)；在Python Flask中使用yield配合Response.stream，并禁用WSGI中间件缓冲。
3、构造数据块：每段文本前添加data:，末尾追加两个换行符\n\n，例如data:你好\n\n；空行或注释行（以:开头）应跳过。
二、前端使用EventSource监听并解析SSE流
EventSource API提供自动重连、事件解析与连接状态管理能力，适用于仅需服务端单向推送的轻量级流式接收场景，但限制为GET请求且默认不携带凭证。
1、创建实例并启用凭据：const es = new EventSource('/api/chat-stream', { withCredentials: true });
2、监听message事件：es.addEventListener('message', event => { const raw = event.data; const content = raw.replace(/^data:\s*/, ''); appendToDisplay(content); });
3、处理连接异常：监听error事件，检查es.readyState值；若状态长期为0（CLOSED）或1（CONNECTING），可调用es.close()后重建实例。
三、前端使用Fetch API + ReadableStream手动处理流
当需要POST请求、自定义认证头（如Authorization）、中断控制或兼容旧环境时，Fetch配合ReadableStream可绕过EventSource限制，直接操作原始字节流，提供更高自由度。
1、发起POST请求：fetch('/api/chat-stream', { method: 'POST', body: JSON.stringify({ model: 'qwen3-4b', stream: true }), headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer xxx' } });
2、校验响应类型：确认response.headers.get('content-type') === 'text/event-stream'；
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
3、获取流读取器：const reader = response.body.getReader(); let decoder = new TextDecoder('utf-8');
4、循环读取chunk：while (true) { const { done, value } = await reader.read(); if (done) break; const text = decoder.decode(value, { stream: true }); parseSSEEvents(text); }
四、前端实现逐字打字机渲染效果
接收到的每个data块可能含多字符，需将其拆解为单字符或中文词/标点等语义单元，并通过requestAnimationFrame控制插入节奏，避免阻塞主线程且保持视觉平滑。
1、获取目标容器：const outputEl = document.getElementById('output');
2、定义递归打字函数：function typeText(text, index = 0) { if (index < text.length) { outputEl.textContent += text[index]; requestAnimationFrame(() => typeText(text, index + 1)); } }
3、在事件回调中触发：message事件解析出content后，立即执行typeText(content)；注意需维护当前光标位置与DOM更新顺序。
五、服务端启用stream参数并对接OpenAI兼容接口
通义千问API兼容OpenAI-style协议，只需在请求体中显式声明stream字段，即可触发底层模型的逐块生成行为，无需修改模型推理逻辑，适配成本最低。
1、构造JSON请求体：{ "model": "qwen3-0.6b", "messages": [{ "role": "user", "content": "你好" }], "stream": true }
2、确保Header包含：Content-Type: application/json 与 Authorization: Bearer <your_api_key>
3、发送至支持流式的端点：如/v1/chat/completions；验证响应头含text/event-stream；
4、提取增量内容：对每个SSE块JSON.parse()后，取choices[0].delta.content字段，该字段即本次新增文本片段。
