logo

开发者热搜

Vue3流式AI聊天界面开发：Deepseek/OpenAI API对接实战指南

作者：蛮不讲李2025.09.25 23:27浏览量：0

简介：本文详解如何使用Vue3构建仿Deepseek/ChatGPT的流式聊天界面，并完成与Deepseek/OpenAI API的对接，涵盖界面设计、流式响应处理及API调用的完整实现。

一、技术选型与项目初始化

1.1 技术栈选择

Vue3作为前端框架的核心选择，其组合式API与TypeScript支持为复杂交互提供了良好基础。搭配Vite构建工具可显著提升开发效率，而Pinia作为状态管理库能简化跨组件通信。后端API对接需支持SSE（Server-Sent Events）协议，这是实现流式响应的关键技术。

1.2 项目初始化流程

  1. npm create vue@latest ai-chat-demo -- --template vue3-ts
  2. cd ai-chat-demo
  3. npm install pinia axios @vueuse/core

项目结构建议采用模块化设计：

  1. src/
  2. ├── api/          # API请求封装
  3. ├── components/   # 通用组件
  4. ├── composables/  # 组合式函数
  5. ├── router/       # 路由配置
  6. ├── stores/       # Pinia状态管理
  7. └── views/        # 页面组件

二、流式聊天界面实现

2.1 核心组件设计

消息气泡组件需支持双向显示，通过props传递消息类型与内容：

  1. <!-- MessageBubble.vue -->
  2. <template>
  3.   <div :class="['bubble', { 'user': isUser }]">
  4.     <div v-if="!isStreaming" class="content">{{ content }}</div>
  5.     <div v-else class="streaming">
  6.       <span v-for="i in 5" :key="i" class="dot"></span>
  7.     </div>
  8.   </div>
  9. </template>
  11. <style scoped>
  12. .bubble {
  13.   max-width: 70%;
  14.   margin: 8px;
  15.   padding: 12px;
  16.   border-radius: 18px;
  17. }
  18. .user {
  19.   margin-left: auto;
  20.   background: #4a6bff;
  21.   color: white;
  22. }
  23. .streaming .dot {
  24.   display: inline-block;
  25.   width: 8px;
  26.   height: 8px;
  27.   border-radius: 50%;
  28.   background: #fff;
  29.   animation: bounce 1.4s infinite ease-in-out;
  30. }
  31. /* 省略动画细节 */
  32. </style>

2.2 消息流处理机制

采用EventSource实现SSE连接，需处理连接中断与重试逻辑：

  1. // api/chat.ts
  2. export const streamChat = async (prompt: string) => {
  3.   const eventSource = new EventSource(`/api/chat/stream?prompt=${encodeURIComponent(prompt)}`);
  5.   return new Promise<string[]>((resolve, reject) => {
  6.     const chunks: string[] = [];
  8.     eventSource.onmessage = (event) => {
  9.       const data = JSON.parse(event.data);
  10.       if (data.finish_reason) {
  11.         eventSource.close();
  12.         resolve(chunks);
  13.       } else {
  14.         chunks.push(data.text);
  15.       }
  16.     };
  18.     eventSource.onerror = (error) => {
  19.       eventSource.close();
  20.       reject(error);
  21.     };
  22.   });
  23. };

三、Deepseek/OpenAI API对接

3.1 API请求封装

创建统一的API服务层，处理认证与错误重试：

  1. // api/service.ts
  2. import axios from 'axios';
  4. const apiClient = axios.create({
  5.   baseURL: import.meta.env.VITE_API_BASE_URL,
  6.   timeout: 30000,
  7. });
  9. apiClient.interceptors.request.use((config) => {
  10.   const token = localStorage.getItem('api_token');
  11.   if (token) {
  12.     config.headers.Authorization = `Bearer ${token}`;
  13.   }
  14.   return config;
  15. });
  17. export const callApi = async <T>(url: string, config?: AxiosRequestConfig) => {
  18.   try {
  19.     const response = await apiClient.get<T>(url, config);
  20.     return response.data;
  21.   } catch (error) {
  22.     if (axios.isAxiosError(error) && error.response?.status === 401) {
  23.       // 处理认证错误
  24.     }
  25.     throw error;
  26.   }
  27. };

3.2 流式响应处理

Deepseek API的流式响应格式与OpenAI类似，但存在字段差异：

  1. // 处理Deepseek响应
  2. const processDeepseekStream = (event: MessageEvent) => {
  3.   const data = JSON.parse(event.data);
  4.   // Deepseek可能使用不同字段名
  5.   const text = data.result?.content || data.choices[0]?.text;
  6.   if (text) appendMessage(text);
  7. };
  9. // 处理OpenAI响应
  10. const processOpenAIStream = (event: MessageEvent) => {
  11.   const data = JSON.parse(event.data);
  12.   const delta = data.choices[0]?.delta?.content;
  13.   if (delta) appendMessage(delta);
  14. };

四、性能优化与用户体验

4.1 虚拟滚动实现

当消息量超过50条时，使用虚拟滚动提升性能：

  1. <!-- ChatContainer.vue -->
  2. <template>
  3.   <div ref="container" class="chat-container">
  4.     <div :style="{ height: totalHeight + 'px' }" class="scroll-wrapper">
  5.       <div :style="{ transform: `translateY(${offset}px)` }" class="content">
  6.         <MessageBubble
  7.           v-for="(msg, index) in visibleMessages"
  8.           :key="index"
  9.           :content="msg.content"
  10.           :is-user="msg.isUser"
  11.         />
  12.       </div>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script setup>
  18. const container = ref<HTMLElement>();
  19. const visibleCount = 20; // 可见消息数
  20. const messages = ref<Array<{content: string, isUser: boolean}>>([]);
  22. const visibleMessages = computed(() => {
  23.   const start = Math.max(0, messages.value.length - visibleCount);
  24.   return messages.value.slice(start);
  25. });
  26. </script>

4.2 错误处理机制

实现三级错误处理体系：

  1. 网络层：重试机制（最多3次）
  2. API层：统一错误码处理
  3. 界面层：用户友好的错误提示
  1. // composables/useError.ts
  2. export const useError = () => {
  3.   const error = ref<string | null>(null);
  5.   const handleApiError = (e: unknown) => {
  6.     if (axios.isAxiosError(e)) {
  7.       switch (e.response?.status) {
  8.         case 401: error.value = '请重新登录'; break;
  9.         case 429: error.value = '请求过于频繁，请稍后再试'; break;
  10.         default: error.value = '服务暂时不可用';
  11.       }
  12.     } else {
  13.       error.value = '网络连接异常';
  14.     }
  15.     setTimeout(() => error.value = null, 3000);
  16.   };
  18.   return { error, handleApiError };
  19. };

五、部署与扩展建议

5.1 环境变量配置

  1. # .env.production
  2. VITE_API_BASE_URL=https://api.deepseek.com/v1
  3. VITE_API_TYPE=deepseek # 或openai
  4. VITE_API_KEY=your_api_key

5.2 多模型支持实现

通过策略模式实现API适配：

  1. // api/modelStrategy.ts
  2. interface ChatModel {
  3.   streamChat(prompt: string): Promise<string[]>;
  4. }
  6. class DeepseekModel implements ChatModel {
  7.   async streamChat(prompt: string) {
  8.     // Deepseek特定实现
  9.   }
  10. }
  12. class OpenAIModel implements ChatModel {
  13.   async streamChat(prompt: string) {
  14.     // OpenAI特定实现
  15.   }
  16. }
  18. export const createModel = (type: string): ChatModel => {
  19.   switch (type) {
  20.     case 'deepseek': return new DeepseekModel();
  21.     case 'openai': return new OpenAIModel();
  22.     default: throw new Error('Unsupported model');
  23.   }
  24. };

5.3 安全增强措施

  1. 输入过滤：使用DOMPurify防止XSS攻击
  2. 速率限制：前端实现简单限流
  3. 数据加密：敏感操作使用HTTPS
  1. // utils/security.ts
  2. import DOMPurify from 'dompurify';
  4. export const sanitizeInput = (text: string) => {
  5.   return DOMPurify.sanitize(text, { ALLOWED_TAGS: [] });
  6. };
  8. export const debounce = <T extends (...args: any[]) => any>(
  9.   func: T,
  10.   wait: number
  11. ) => {
  12.   let timeout: NodeJS.Timeout;
  13.   return (...args: Parameters<T>) => {
  14.     clearTimeout(timeout);
  15.     timeout = setTimeout(() => func(...args), wait);
  16.   };
  17. };

六、完整实现示例

6.1 主组件整合

  1. <!-- ChatView.vue -->
  2. <template>
  3.   <div class="chat-wrapper">
  4.     <div class="message-list" ref="messageList">
  5.       <MessageBubble
  6.         v-for="(msg, index) in messages"
  7.         :key="index"
  8.         :content="msg.content"
  9.         :is-user="msg.isUser"
  10.         :is-streaming="index === messages.length - 1 && isStreaming"
  11.       />
  12.     </div>
  13.     <div class="input-area">
  14.       <textarea v-model="input" @keydown.enter.prevent="handleSubmit" />
  15.       <button @click="handleSubmit" :disabled="isLoading">
  16.         {{ isLoading ? '发送中...' : '发送' }}
  17.       </button>
  18.     </div>
  19.   </div>
  20. </template>
  22. <script setup>
  23. import { ref, onMounted } from 'vue';
  24. import { useChatStore } from '@/stores/chat';
  25. import { createModel } from '@/api/modelStrategy';
  27. const chatStore = useChatStore();
  28. const input = ref('');
  29. const isLoading = ref(false);
  30. const isStreaming = ref(false);
  31. const messages = ref<Array<{content: string, isUser: boolean}>>([]);
  33. const model = createModel(import.meta.env.VITE_API_TYPE);
  35. const handleSubmit = async () => {
  36.   if (!input.value.trim()) return;
  38.   const userMsg = { content: input.value, isUser: true };
  39.   messages.value.push(userMsg);
  40.   input.value = '';
  41.   isLoading.value = true;
  42.   isStreaming.value = true;
  44.   try {
  45.     const chunks = await model.streamChat(userMsg.content);
  46.     const aiMsg = { content: chunks.join(''), isUser: false };
  47.     messages.value.push(aiMsg);
  48.   } catch (error) {
  49.     console.error('Chat error:', error);
  50.   } finally {
  51.     isLoading.value = false;
  52.     isStreaming.value = false;
  53.   }
  54. };
  55. </script>

6.2 状态管理实现

  1. // stores/chat.ts
  2. import { defineStore } from 'pinia';
  4. export const useChatStore = defineStore('chat', {
  5.   state: () => ({
  6.     messages: [] as Array<{content: string, isUser: boolean}>,
  7.     isLoading: false,
  8.   }),
  9.   actions: {
  10.     addMessage(message: string, isUser: boolean) {
  11.       this.messages.push({ content: message, isUser });
  12.     },
  13.     clearMessages() {
  14.       this.messages = [];
  15.     },
  16.   },
  17. });

七、总结与展望

本实现方案通过Vue3的组合式API构建了响应式的流式聊天界面，采用策略模式实现了对Deepseek和OpenAI API的灵活适配。关键优化点包括：

  1. 虚拟滚动技术处理大量消息
  2. 三级错误处理体系提升稳定性
  3. 环境变量配置实现多环境部署

未来可扩展方向：

  1. 增加多轮对话上下文管理
  2. 实现消息编辑与删除功能
  3. 添加插件系统支持自定义功能
  4. 集成语音输入输出功能

通过模块化设计和清晰的分层架构，该方案可快速适配其他LLM服务，为开发者提供高可复用的AI聊天界面解决方案。

相关文章推荐

发表评论

最热文章

关于作者

  • 被阅读数
  • 被赞数
  • 被收藏数