前端直连大模型：技术栈与实战

3. 代理服务器模式 - 最安全的企业级方案

// 前端调用本地代理
const callAIViaProxy = async (message) => {
  const response = await fetch('/api/ai-proxy', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  return response.json();
};

// Node.js 代理服务器示例
// server.js
app.post('/api/ai-proxy', async (req, res) => {
  const { message } = req.body;
  // 在这里安全地调用大模型 API
  const aiResponse = await callOpenAI(message);
  // 可以添加日志、限流、缓存等逻辑
  logAIRequest(req.user.id, message);
  res.json(aiResponse);
});

4. WebSocket 实时通信 - 最适合聊天场景

// 前端 WebSocket 连接
class AIChatSocket {
  constructor(url) {
    this.socket = new WebSocket(url);
    this.init();
  }

  init() {
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.onMessage(data);
    };
    this.socket.onopen = () => {
      console.log('AI 连接已建立');
    };
  }

  sendMessage(message) {
    this.socket.send(JSON.stringify({ type: 'chat', content: message }));
  }

  onMessage(data) {
    // 处理 AI 响应
    if (data.type === 'stream') {
      console.log('收到流式数据:', data.content);
    }
  }
}

二、完整实战：构建智能代码助手应用

项目结构

smart-code-assistant/ ├── src/ │ ├── components/ │ │ ├── CodeEditor/ │ │ ├── ChatPanel/ │ │ └── HistoryPanel/ │ ├── services/ │ │ ├── aiService.js │ │ ├── cacheService.js │ │ └── securityService.js │ ├── utils/ │ └── App.js └── server/ └── proxy-server.js

核心 AI 服务层实现

// src/services/aiService.js
class AIService {
  constructor() {
    this.baseURL = process.env.REACT_APP_AI_PROXY_URL;
    this.cache = new Map();
    this.requestQueue = [];
    this.isProcessing = false;
  }

  // 带缓存的 AI 请求
  async requestWithCache(prompt, options = {}) {
    const cacheKey = this.generateCacheKey(prompt, options);
    // 检查缓存
    if (this.cache.has(cacheKey) && !options.forceRefresh) {
      return this.cache.get(cacheKey);
    }
    // 限流处理
    if (this.requestQueue.length >= 5) {
      throw new Error('请求过于频繁，请稍后再试');
    }
    return new Promise((resolve, reject) => {
      this.requestQueue.push({ prompt, options, resolve, reject });
      this.processQueue();
    });
  }

  // 处理请求队列
  async processQueue() {
    if (this.isProcessing || this.requestQueue.length === 0) return;
    this.isProcessing = true;
    const request = this.requestQueue.shift();
    try {
      const response = await this.makeAIRequest(request.prompt, request.options);
      this.cache.set(
        this.generateCacheKey(request.prompt, request.options),
        response
      );
      request.resolve(response);
    } catch (error) {
      request.reject(error);
    } finally {
      this.isProcessing = false;
      this.processQueue();
    }
  }

  // 实际 AI 请求
  async makeAIRequest(prompt, options) {
    const response = await fetch(`${this.baseURL}/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Request-ID': this.generateRequestId()
      },
      body: JSON.stringify({
        prompt,
        model: options.model || 'gpt-3.5-turbo',
        max_tokens: options.maxTokens || 1000,
        temperature: options.temperature || 0.7
      })
    });
    if (!response.ok) {
      throw new Error(`AI 请求失败：${response.status}`);
    }
    return response.json();
  }

  // 流式响应处理
  async *streamCompletion(prompt) {
    const response = await fetch(`${this.baseURL}/completions/stream`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt })
    });
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(line => line.trim() !== '');
      for (const line of lines) {
        if (line.startsWith('data:')) {
          yield JSON.parse(line.substring(5));
        }
      }
    }
  }
}