axios ai 流式传输

### 如何在 Node.js 中通过 SSE 实现 AI 流式数据传输 #### 创建 HTTP 服务器并设置响应头 为了支持 Server-Sent Events (SSE)，HTTP 响应需要特定的头部信息。这些头部确保客户端能够识别这是一个持续连接，并能处理接收到的消息。 ```javascript const http = require('http'); // 创建一个简单的 HTTP 服务 const server = http.createServer((req, res) => { // 设置必要的 MIME 类型和其他头部字段以启用 SSE res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); }); ``` #### 发送初始消息给客户端 一旦建立了到客户端的连接，可以立即发送一条欢迎消息作为测试： ```javascript server.on('request', function(req, res){ if (req.url === '/events') { res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' }); // 发送初次问候语句 res.write(`data: 连接到服务器...\n\n`); // 定期向客户端推送更新 setInterval(() => { const data = `data: ${new Date().toLocaleTimeString()}\n\n`; res.write(data); }, 1000); req.on('close', () => { console.log(`${req.socket.remoteAddress} 断开连接`); }); } }); ``` #### 处理来自 OpenAI 的流式数据 当涉及到像 ChatGPT 这样的 AI 平台时，通常会有一个异步过程来获取回复。这里展示了如何将从外部 API 获取的结果逐步传递给前端用户[^1]。 ```javascript const axios = require('axios').default; async function streamOpenAIData(res) { try { let config = { method: 'post', url: 'https://api.openai.com/v1/engines/davinci-codex/completions', headers: { 'Authorization': 'Bearer YOUR_API_KEY_HERE', 'Content-Type': 'application/json' }, responseType: 'stream' // 关键配置项用于开启流模式 }; await axios(config).then(function(responseStream) { responseStream.data.pipe(res); // 将远程API返回的内容直接转发给浏览器 }).catch(error => { console.error("Error streaming from OpenAI:", error.message); res.end(); }); } catch(e) { console.error("Unexpected Error:", e); res.end(); } } ``` 上述代码片段中，`responseType: 'stream'` 是非常重要的参数，它允许 Axios 接收分块的数据而不是等待整个响应完成后再处理[^4]。

### 实现 Vue2 中 AI 对话的流式交互 要在 Vue2 中实现与 AI 的对话功能并支持流式响应效果，可以按照以下方式构建应用： #### 1. 创建 Vue2 项目 通过 Vue CLI 或其他工具初始化一个新的 Vue2 项目。确保安装必要的依赖项 `axios` 和任何用于 HTTP 请求的库。 ```bash vue create my-chat-app cd my-chat-app npm install axios ``` #### 2. 构建聊天界面组件 设计一个基础的聊天界面，包含消息列表、输入框以及发送按钮。利用 Vue 的模板语法来动态渲染消息列表。 以下是示例代码片段： ```html <template> <div class="chat-container"> <!-- 消息列表 --> <ul class="message-list"> <li v-for="(msg, index) in messages" :key="index" :class="'message ' + msg.type"> {{ msg.text }} </li> </ul> <!-- 输入区域 --> <div class="input-area"> <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." /> <button @click="sendMessage">Send</button> </div> </div> </template> <script> export default { data() { return { newMessage: '', // 用户输入的消息 messages: [], // 存储所有消息的历史记录 }; }, methods: { sendMessage() { if (!this.newMessage.trim()) return; this.messages.push({ text: this.newMessage, type: 'user' }); this.newMessage = ''; // 调用后端 API 获取 AI 回复 this.fetchAIResponse(); }, async fetchAIResponse() { const lastUserMsg = this.messages[this.messages.length - 1].text; try { let responseText = ''; // 使用 Axios 发起 POST 请求到后端接口 const stream = await axios.post('/api/chat', { user_input: lastUserMsg }, { responseType: 'stream' }); // 处理流式返回的数据 stream.data.on('data', (chunk) => { responseText += chunk.toString(); // 将接收到的部分追加到最终字符串中 console.log(responseText); // 可选：调试日志查看当前接收状态 // 动态更新界面上的 AI 回复内容 this.updateAIMessage(responseText); }); stream.data.on('end', () => { console.log('Stream ended'); }); } catch (error) { console.error('Error fetching AI response:', error.message); } }, updateAIMessage(text) { const aiIndex = this.messages.findIndex(msg => msg.type === 'ai'); if (aiIndex !== -1) { this.$set(this.messages, aiIndex, { text, type: 'ai' }); // 更新现有 AI 消息 } else { this.messages.push({ text, type: 'ai' }); // 添加新的 AI 消息 } } } }; </script> <style scoped> .chat-container { display: flex; flex-direction: column; height: 100vh; } .message-list { list-style-type: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; } .message.user { color: blue; } .message.ai { color: green; } .input-area { display: flex; align-items: center; } </style> ``` 上述代码实现了基本的功能需求，包括用户消息发送、调用后端接口获取 AI 回复，并逐步展示流式响应的内容[^2]。 #### 3. 后端配置 为了支持流式响应，在后端需要设置合适的路由和逻辑以允许分块传输编码（Chunked Transfer Encoding）。例如，如果使用 Node.js/Express，则可以通过如下方法实现： ```javascript const express = require('express'); const app = express(); app.use(express.json()); // 示例 AI 接口模拟流式回复 app.post('/api/chat', (req, res) => { const userInput = req.body.user_input || ''; res.setHeader('Content-Type', 'text/plain; charset=utf-8'); // 设置适当 MIME 类型 const responses = ['你好！', '我在思考...', '这是我的答案...']; let currentIndex = 0; function sendNextPart() { if (currentIndex >= responses.length) { res.end(); // 结束流式传输 return; } setTimeout(() => { res.write(responses[currentIndex++] + '\n'); // 模拟延迟逐句发送 sendNextPart(); }, 500); // 控制每段数据的时间间隔 } sendNextPart(); }); app.listen(3000, () => console.log('Server running on port 3000')); ``` 此脚本展示了如何向客户端逐步推送多个部分的结果，从而形成流畅的打字机效果[^1]。 --- ####