从零构建ChatGPT镜像网站：技术选型与实现详解

1次阅读

没有评论

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

最近 ChatGPT API 的开放让很多开发者跃跃欲试，想要构建自己的镜像网站。但在实际开发过程中，我发现有几个关键痛点需要解决：

API 调用限制 ：官方 API 有严格的速率限制，直接前端调用容易被封禁
响应延迟 ：长文本生成时用户等待体验差
对话状态管理 ：多轮对话的上下文保持需要后端支持
身份验证 ：需要安全可控的访问权限管理

经过多次尝试，我总结出两种主流实现方案：

优点：架构简单，开发速度快
缺点：API 密钥暴露风险高，难以应对速率限制

优点：安全性好，可以实现请求聚合和缓存
缺点：需要维护后端服务，部署复杂度稍高

最终选择 ：考虑到长期稳定运行的需求，我采用了后端中转方案。

// 核心聊天组件
<template>
  <div class="chat-container">
    <div v-for="(msg, index) in messages" :key="index">
      <div :class="['message', msg.role]">
        {{msg.content}}
      </div>
    </div>
    <form @submit.prevent="sendMessage">
      <input v-model="inputText" />
      <button type="submit"> 发送 </button>
    </form>
  </div>
</template>

<script setup>
import {ref} from 'vue'

const messages = ref([])
const inputText = ref('')

// 使用 SSE 接收流式响应
async function sendMessage() {const userMsg = { role: 'user', content: inputText.value}
  messages.value.push(userMsg)

  const eventSource = new EventSource(`/api/chat?query=${encodeURIComponent(inputText.value)}`
  )

  eventSource.onmessage = (e) => {// 处理流式返回的数据}
}
</script>

// 核心 API 路由
import express from 'express'
import {OpenAI} from 'openai'

const router = express.Router()
const openai = new OpenAI(process.env.OPENAI_KEY)

// 带缓存的聊天端点
router.get('/chat', async (req, res) => {
  // 设置 SSE 头
  res.setHeader('Content-Type', 'text/event-stream')
  res.setHeader('Cache-Control', 'no-cache')
  res.setHeader('Connection', 'keep-alive')

  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [{role: 'user', content: req.query.query}],
      stream: true
    })

    // 流式传输响应
    for await (const chunk of completion) {res.write(`data: ${JSON.stringify(chunk)}\n\n`)
    }
  } catch (err) {console.error('API 调用失败:', err)
  } finally {res.end()
  }
})