ChatGPT 前端集成实战：从 API 调用到性能优化的全链路方案

1次阅读

没有评论

共计 3291 个字符，预计需要花费 9 分钟才能阅读完成。

在实际项目中集成 ChatGPT API 时，前端开发者通常会遇到以下典型问题：

长文本响应卡顿 ：当返回内容较大时，需要等待所有内容传输完成才能显示，用户体验差
多轮对话状态维护困难 ：需要自行管理对话历史，容易丢失上下文或超过 Token 限制
免费版 API 的速率限制 ：免费用户每分钟只能发起少量请求，需要合理控制调用频率

对于需要实时显示长文本的场景，我们对比两种主流方案：

SSE (Server-Sent Events)
单向通信（服务端→客户端）
基于 HTTP 协议，无需额外握手
自动重连机制

示例代码：

const eventSource = new EventSource('/api/chat-stream');
eventSource.onmessage = (event) => {// 处理流式数据};

WebSocket
全双工通信
需要维护连接状态
适合高频双向交互场景

选择建议 ：纯聊天场景优先使用 SSE，游戏等复杂交互场景用 WebSocket。

使用 AbortController 避免长时间等待：

const fetchWithTimeout = async (url: string, options: RequestInit, timeout = 10000) => {const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    return response;
  } catch (err) {clearTimeout(timeoutId);
    throw err;
  }
};

完整 useChatGPT Hook 示例（含 LRU 缓存）：

import {useState, useEffect, useCallback} from 'react';

type Message = {
  role: 'user' | 'assistant';
  content: string;
};

const CACHE_SIZE = 50; // 缓存最近 50 条对话

const useChatGPT = (apiKey: string) => {const [messages, setMessages] = useState<Message[]>([]);
  const [cache, setCache] = useState(new Map<string, string>());

  // LRU 缓存管理
  const updateCache = useCallback((key: string, value: string) => {const newCache = new Map(cache);
    if (newCache.size >= CACHE_SIZE) {const firstKey = newCache.keys().next().value;
      newCache.delete(firstKey);
    }
    newCache.set(key, value);
    setCache(newCache);
  }, [cache]);

  const sendMessage = async (content: string) => {const newMessages = [...messages, { role: 'user', content}];
    setMessages(newMessages);

    // 检查缓存
    const cacheKey = JSON.stringify(newMessages);
    if (cache.has(cacheKey)) {
      setMessages([...newMessages, {
        role: 'assistant',
        content: cache.get(cacheKey) as string
      }]);
      return;
    }

    try {
      const response = await fetchWithTimeout('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
          model: 'gpt-3.5-turbo',
          messages: newMessages,
          stream: true  // 启用流式响应
        })
      }, 15000);

      // 处理流式响应...
      const result = await processStream(response);
      updateCache(cacheKey, result);
      setMessages([...newMessages, { role: 'assistant', content: result}]);
    } catch (error) {console.error('API 调用失败:', error);
      // 错误处理逻辑
    }
  };

  return {messages, sendMessage};
};

我们在不同网络环境下测试了首字节到达时间：

网络环境	平均 TTFB
本地开发环境	320ms
4G 移动网络	850ms
3G 模拟网络	2100ms

优化建议 ：预加载模型、建立长连接减少握手时间。

实现 Token 计数时需要考虑：

// 简化的 Token 计数器
const countTokens = (text: string): number => {
  // 英文按空格分词，中文按字分词
  return text.split(/\s+|\b|/u).filter(Boolean).length;
};

空间复杂度 ：O(n)，其中 n 为文本长度。对于长对话需要定期清理历史消息。

使用正则表达式进行基本过滤：

const filterSensitiveContent = (text: string) => {
  const sensitivePatterns = [/\b( 暴力 | 色情 | 政治敏感词)\b/gi,
    // 更多规则...
  ];

  return sensitivePatterns.reduce((result, pattern) => 
    result.replace(pattern, '[ 已过滤]'), text);
};

欧盟用户数据需特殊处理：

对话数据加密存储
提供数据删除接口
不超过必要存储期限

Next.js 服务端方案示例：

// pages/api/chat.ts
export default async function handler(req, res) {if (req.method !== 'POST') return res.status(405).end();

  const {messages} = req.body;

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages
    })
  });

  // 转发响应...
}

通过上述方案，我们实现了：