Vue3+Node.js实现AI流式输出方式

mkdir ai-stream-backend
cd ai-stream-backend
npm init -y
npm install express cors openai dotenv  # 核心依赖
# cors：解决跨域；openai：调用AI接口；dotenv：管理环境变量

require('dotenv').config(); // 加载环境变量
const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');
const app = express();
app.use(cors()); // 允许跨域（开发环境，生产环境需配置具体域名）
app.use(express.json()); // 解析JSON请求体
// 初始化OpenAI客户端（调用AI接口，这里以OpenAI兼容接口为例，如阿里云百炼、通义千问）
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY, // 从环境变量获取，避免明文暴露
  baseURL: process.env.BASE_URL || 'https://api.openai.com/v1' // 可替换为国内AI接口地址
});
// 流式输出接口（核心接口）
app.post('/api/stream', async (req, res) => {
  try {
    const { prompt } = req.body; // 接收前端传递的用户提问
    if (!prompt) {
      return res.status(400).json({ error: '请输入提问内容' });
    }
    // 1. 调用AI接口，开启流式（stream: true）
    const stream = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo', // 可替换为qwen-3.5-plus等国内模型
      messages: [
        { role: 'user', content: prompt }
      ],
      stream: true // 开启流式输出，核心参数
    });
    // 2. 配置SSE响应头（关键：告诉前端这是流式响应）
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');
    res.setHeader('Access-Control-Allow-Origin', '*'); // 开发环境允许所有域名
    // 3. 遍历AI返回的stream，逐段转发给前端
    for await (const chunk of stream) {
      // 过滤空chunk（AI会返回空片段表示结束，避免前端报错）
      const content = chunk.choices[0]?.delta?.content;
      if (content) {
        // SSE格式：必须以 "data: 内容\n\n" 结尾，否则前端无法解析
        res.write(`data: ${content}\n\n`);
      }
    }
    // 4. 流式结束，关闭连接
    res.write('data: [END]\n\n');
    res.end();
  } catch (error) {
    console.error('流式接口报错：', error);
    res.status(500).write('data: 服务器异常，请稍后再试\n\n');
    res.end();
  }
});
// 启动服务
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`后端服务启动成功，端口：${PORT}`);
});

OPENAI_API_KEY=你的AI接口密钥（如阿里云百炼、OpenAI密钥）
BASE_URL=你的AI接口基础地址（如阿里云百炼：https://dashscope.aliyuncs.com/compatible-mode/v1）
PORT=3001

npm create vue@latest ai-stream-frontend
cd ai-stream-frontend
npm install
# 无需额外安装依赖，Vue3原生支持EventSource（SSE）

<template>
  <div class="stream-chat">
    <h2>Vue3 + Node.js AI流式对话</h2>
    <div class="chat-container">
      <div class="chat-content" v-text="chatContent"></div>
      <div class="loading" v-if="isLoading">思考中...</div>
    </div>
    <div class="input-container">
      <input 
        v-model="prompt" 
        placeholder="请输入你的问题..." 
        @keyup.enter="sendPrompt"
        :disabled="isLoading"
      />
      <button @click="sendPrompt" :disabled="isLoading">发送</button>
      <button @click="stopStream" :disabled="!isLoading">停止生成</button>
    </div>
  </div>
</template>
<script setup>
import { ref, onUnmounted } from 'vue';
// 状态管理
const prompt = ref(''); // 用户输入的提问
const chatContent = ref(''); // 流式渲染的内容
const isLoading = ref(false); // 加载状态
let eventSource = ref(null); // SSE连接实例
// 发送提问，开启流式请求
const sendPrompt = () => {
  if (!prompt.value.trim()) {
    alert('请输入问题');
    return;
  }
  // 重置状态
  chatContent.value = '';
  isLoading.value = true;
  // 1. 先发送请求到后端（告知后端用户提问）
  fetch('http://localhost:3001/api/stream', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ prompt: prompt.value })
  }).then(() => {
    // 2. 建立SSE连接，接收流式数据
    eventSource.value = new EventSource('http://localhost:3001/api/stream');
    // 3. 接收后端推送的每一个片段
    eventSource.value.onmessage = (event) => {
      // 监听流式结束标识
      if (event.data === '[END]') {
        isLoading.value = false;
        eventSource.value.close(); // 关闭连接
        return;
      }
      // 逐字追加内容，实现打字机效果
      chatContent.value += event.data;
    };
    // 4. 处理SSE连接异常
    eventSource.value.onerror = (error) => {
      console.error('SSE连接异常：', error);
      isLoading.value = false;
      chatContent.value += '\n\n连接异常，请稍后再试';
      eventSource.value.close();
    };
  }).catch((error) => {
    console.error('发送请求失败：', error);
    isLoading.value = false;
    chatContent.value += '\n\n发送请求失败，请稍后再试';
  });
};
// 停止流式生成（中断连接）
const stopStream = () => {
  if (eventSource.value) {
    eventSource.value.close();
    eventSource.value = null;
  }
  isLoading.value = false;
};
// 组件卸载时，关闭SSE连接（避免内存泄漏）
onUnmounted(() => {
  if (eventSource.value) {
    eventSource.value.close();
  }
});
</script>
<style scoped>
.stream-chat {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.chat-container {
  width: 100%;
  min-height: 300px;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  white-space: pre-wrap; /* 保留换行 */
}
.loading {
  color: #666;
  margin-top: 10px;
  font-style: italic;
}
.input-container {
  display: flex;
  gap: 10px;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #42b983;
  color: white;
  cursor: pointer;
}
button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>

<template>
  <StreamChat />
</template>
<script setup>
import StreamChat from './components/StreamChat.vue';
</script>

// 后端配置（关键代码）
app.use(cors()); // 开发环境允许所有跨域请求
// 流式接口中添加响应头
res.setHeader('Access-Control-Allow-Origin', '*');

// 后端关键修复
const content = chunk.choices[0]?.delta?.content;
if (content) {
  res.write(`data: ${content}\n\n`); // 必须是\n\n结尾
}

// 后端添加超时配置
app.use((req, res, next) => {
  res.setTimeout(300000, () => { // 5分钟超时
    res.end('data: 连接超时，请重新提问\n\n');
  });
  next();
});