ChatGPT网页开发入门指南：从零搭建到生产环境部署

1次阅读

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

随着 AI 技术的快速发展，ChatGPT 等大语言模型已经广泛应用于客服、教育、内容创作等领域。网页端集成 ChatGPT 能够提供更直观的用户交互体验，开发者可以快速构建智能对话应用。本文将带领初学者一步步完成 ChatGPT 网页开发的全流程。

前端框架的选择直接影响开发效率和最终性能。以下是两种主流框架的对比：

React
优点：生态系统完善，社区支持好，适合复杂交互场景
缺点：学习曲线稍陡，需要掌握 JSX 和状态管理
Vue
优点：上手简单，模板语法直观，文档完善
缺点：大型项目可能需要额外配置

对于 ChatGPT 集成，两种框架都能很好地工作，本文将以 React 为例进行演示。

首先需要获取 OpenAI API 密钥，可以在官网申请
安装必要的依赖：

npm install openai axios

创建 API 服务层：

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.REACT_APP_OPENAI_KEY, // 从环境变量获取
  dangerouslyAllowBrowser: true // 仅限开发环境
});

export const chatCompletion = async (messages) => {
  try {
    const response = await openai.chat.completions.create({
      model: "gpt-3.5-turbo",
      messages,
      temperature: 0.7,
    });
    return response.choices[0].message;
  } catch (error) {console.error("API 调用失败:", error);
    throw error;
  }
};

会话管理是 Chat 应用的核心，需要维护对话历史和当前状态：

import {useState} from 'react';

function ChatApp() {const [messages, setMessages] = useState([{ role: 'system', content: '你是一个有帮助的 AI 助手'}
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {if (!input.trim()) return;

    const userMessage = {role: 'user', content: input};
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {const response = await chatCompletion([...messages, userMessage]);
      setMessages(prev => [...prev, response]);
    } finally {setLoading(false);
    }
  };

  // 渲染 UI...
}

请求缓存：对相同输入可以缓存响应
节流防抖：避免用户快速发送多个请求
流式响应：使用 Server-Sent Events 实现实时响应

示例节流实现：

function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {const now = new Date().getTime();
    if (now - lastCall < delay) return;
    lastCall = now;
    return func.apply(this, args);
  };
}

// 使用
const throttledSend = throttle(handleSend, 1000);

永远不要在前端硬编码 API 密钥
使用后端服务代理 API 请求
设置适当的 API 调用限额

try {// API 调用} catch (error) {if (error.response) {
    // HTTP 错误
    console.error(`API 响应错误: ${error.response.status}`);
  } else if (error.request) {
    // 请求未发出
    console.error('网络错误，请检查连接');
  } else {
    // 其他错误
    console.error('未知错误:', error.message);
  }
}