千问3.5-27B流式接口详解：/chat_stream响应格式+前端SSE解析完整示例

本文介绍了如何在星图GPU平台上自动化部署千问3.5-27B镜像，并详细解析其流式接口/chat_stream的应用。该接口采用SSE技术实现实时对话响应，适用于构建自然交互的AI聊天应用，如在线客服、智能问答系统等场景，显著提升用户体验和响应效率。

Paula-柒月拾

261人浏览 · 2026-03-15 00:02:17

Paula-柒月拾 · 2026-03-15 00:02:17 发布

千问3.5-27B流式接口详解：/chat_stream响应格式+前端SSE解析完整示例

1. 流式接口概述

Qwen3.5-27B提供的流式对话接口/chat_stream允许开发者实现类似ChatGPT的逐字输出效果。与传统的同步接口不同，流式接口采用Server-Sent Events(SSE)技术，能够在生成过程中持续推送部分结果，显著提升用户体验。

1.1 流式接口优势

实时反馈：用户无需等待完整响应生成
网络友好：减少长文本生成时的等待时间
交互自然：模拟人类对话的渐进式表达
资源优化：可以中途停止不想要的响应

2. 接口请求与响应格式

2.1 请求示例

curl -X POST http://127.0.0.1:7860/chat_stream \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "请用中文解释量子计算的基本原理",
    "max_new_tokens": 256,
    "temperature": 0.7
  }'

2.2 响应格式解析

流式接口返回的是text/event-stream格式的数据，每个事件包含以下字段：

event: message
data: {
  "text": "量子计算",  // 当前新增的文本片段
  "finished": false   // 是否生成结束
}

完整响应由多个这样的事件组成，直到finished变为true。

3. 前端SSE实现详解

3.1 基础实现代码

以下是一个完整的HTML+JavaScript示例，展示如何在前端处理流式响应：

<!DOCTYPE html>
<html>
<head>
  <title>Qwen3.5-27B流式对话演示</title>
</head>
<body>
  <div id="chat-container" style="width: 600px; margin: 0 auto;">
    <textarea id="user-input" rows="4" cols="50"></textarea>
    <button id="send-btn">发送</button>
    <div id="response-area" style="margin-top: 20px; border: 1px solid #ccc; min-height: 200px;"></div>
  </div>

  <script>
    document.getElementById('send-btn').addEventListener('click', async () => {
      const prompt = document.getElementById('user-input').value;
      const responseArea = document.getElementById('response-area');
      responseArea.innerHTML = ''; // 清空之前的回复
      
      const eventSource = new EventSource(`/chat_stream?prompt=${encodeURIComponent(prompt)}`);
      
      eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        responseArea.innerHTML += data.text;
        
        if (data.finished) {
          eventSource.close();
          console.log('流式传输结束');
        }
      };
      
      eventSource.onerror = (error) => {
        console.error('SSE错误:', error);
        eventSource.close();
      };
    });
  </script>
</body>
</html>

3.2 关键代码解析

EventSource对象：浏览器原生SSE接口，自动处理连接和重连
onmessage事件：每次收到服务器推送时触发
数据拼接：将每次收到的文本片段追加到显示区域
连接关闭：当收到finished:true时关闭连接

4. 高级功能实现

4.1 带历史上下文的对话

要实现多轮对话，需要在请求中包含历史消息：

const chatHistory = [
  {"role": "user", "content": "量子计算是什么？"},
  {"role": "assistant", "content": "量子计算是利用量子力学原理..."}
];

const eventSource = new EventSource(
  `/chat_stream?prompt=${encodeURIComponent(newPrompt)}` + 
  `&history=${encodeURIComponent(JSON.stringify(chatHistory))}`
);

4.2 中断响应机制

可以添加停止按钮来中断正在进行的生成：

let eventSource;

document.getElementById('stop-btn').addEventListener('click', () => {
  if (eventSource) {
    eventSource.close();
    console.log('用户中断了生成');
  }
});