网页版ChatGPT开发入门：从零搭建到核心功能实现

4次阅读

没有评论

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

网页版 ChatGPT 是基于 OpenAI API 构建的对话应用，可嵌入网站或作为独立服务运行。典型应用场景包括：

客服自动化系统
教育领域的智能辅导
内容创作辅助工具
个人知识管理助手

前端界面：用户输入和对话展示
后端服务：处理 API 调用和业务逻辑
持久层：会话历史存储

免费账号每分钟 3 次请求限制
每次对话的 token 上限(4096 tokens)
长文本响应可能被截断

流式响应展示(打字机效果)
多轮对话上下文维护
敏感内容过滤机制

import {useState} from 'react';

function ChatApp() {const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  const handleSubmit = async (e) => {e.preventDefault();
    const userMessage = {role: 'user', content: input};
    setMessages(prev => [...prev, userMessage]);

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        body: JSON.stringify({messages: [...messages, userMessage]
        })
      });

      const data = await response.json();
      setMessages(prev => [...prev, {
        role: 'assistant',
        content: data.message
      }]);
    } catch (error) {console.error('API 请求失败:', error);
    }

    setInput('');
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (<div key={i} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入消息..."
        />
        <button type="submit"> 发送 </button>
      </form>
    </div>
  );
}

const express = require('express');
const {Configuration, OpenAIApi} = require('openai');

const app = express();
app.use(express.json());

const configuration = new Configuration({apiKey: process.env.OPENAI_API_KEY,});
const openai = new OpenAIApi(configuration);

app.post('/api/chat', async (req, res) => {
  try {const { messages} = req.body;

    // 基础参数配置
    const completion = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages,
      temperature: 0.7,
    });

    res.json({message: completion.data.choices[0].message.content
    });
  } catch (error) {console.error('OpenAI API 错误:', error);
    res.status(500).json({error: '处理请求时出错'});
  }
});

app.listen(3000, () => {console.log('Server running on port 3000');
});

浏览器本地存储：
使用 localStorage 简单实现
适合单用户临时会话
数据库存储：
MongoDB 文档存储
用户认证关联会话历史

API 返回截断响应
解决方案：监控响应中的 finish_reason 字段
当值为 ”length” 时提示用户继续提问
上下文丢失问题
确保每次请求包含完整对话历史
注意 token 消耗随对话增长而增加
响应延迟过高
实现流式传输(SSE/WebSocket)
前端展示部分结果而非等待完整响应

// Express 中间件示例
const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 分钟
  max: 100 // 每个 IP 限制 100 次请求
});

app.use('/api/chat', limiter);