从零构建ChatGPT聊天框：新手入门指南与最佳实践

1次阅读

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

ChatGPT API 是基于 OpenAI 的 GPT 模型构建的对话接口，它允许开发者通过简单的 HTTP 请求与 AI 进行交互。其核心工作原理是将用户输入文本发送到云端，经过模型处理后返回生成的响应。这种技术广泛应用于客服机器人、智能助手、内容创作工具等场景。

对于初学者来说，构建一个聊天框应用是理解 API 交互的绝佳起点。我们将从最基础的 API 调用开始，逐步完善功能，最终实现一个完整的聊天界面。

在开始编码前，我们需要选择合适的开发技术栈。以下是常见的前后端组合对比：

前端框架选择
Vue.js：学习曲线平缓，适合快速原型开发
React：组件化程度高，生态丰富但学习成本略高
后端语言选择
Node.js：与前端 JS 语法一致，适合全栈开发
Python：AI 生态完善，但需要处理前后端分离

本教程将采用 Vue3+Node.js 的组合，这种搭配对新手最为友好。

首先我们需要封装基础的 API 调用功能。创建一个专门的 service 模块处理与 OpenAI 的通信：

// services/chatService.js
import axios from 'axios';

const API_KEY = 'your-api-key';
const API_URL = 'https://api.openai.com/v1/chat/completions';

export async function sendMessage(messages) {
  try {
    const response = await axios.post(API_URL, {
      model: 'gpt-3.5-turbo',
      messages,
      temperature: 0.7,
    }, {
      headers: {'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json'
      }
    });

    return response.data.choices[0].message.content;
  } catch (error) {console.error('API 调用失败:', error);
    throw error;
  }
}

良好的对话体验需要维护完整的聊天历史。我们可以使用一个数组来存储对话上下文：

// store/chatStore.js
import {reactive} from 'vue';

export const chatStore = reactive({messages: [],

  addMessage(role, content) {this.messages.push({ role, content});
  },

  clearMessages() {this.messages = [];
  }
});

为了提高响应速度，可以使用流式 API 逐步显示回复内容：

// 修改后的 sendMessage 函数
async function sendMessageStream(messages, onData) {
  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {'Authorization': `Bearer ${API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages,
      stream: true
    })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let partialLine = '';

  while (true) {const { value, done} = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value);
    const lines = (partialLine + chunk).split('\n');
    partialLine = lines.pop();

    for (const line of lines) {if (line.startsWith('data:') && !line.includes('[DONE]')) {const data = JSON.parse(line.substring(5));
        const content = data.choices[0].delta.content;
        if (content) onData(content);
      }
    }
  }
}

下面是一个完整的 Vue 组件示例，整合了上述功能：

<!-- components/ChatBox.vue -->
<template>
  <div class="chat-container">
    <div class="message-area">
      <div 
        v-for="(msg, index) in messages" 
        :key="index" 
        :class="['message', msg.role]"
      >
        {{msg.content}}
      </div>
    </div>

    <div class="input-area">
      <input 
        v-model="inputMessage" 
        @keyup.enter="sendMessage" 
        placeholder="输入消息..."
      />
      <button @click="sendMessage"> 发送 </button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {chatStore} from '@/store/chatStore';
import {sendMessageStream} from '@/services/chatService';

const inputMessage = ref('');
const messages = ref([]);

async function sendMessage() {if (!inputMessage.value.trim()) return;

  // 添加用户消息
  const userMessage = inputMessage.value;
  chatStore.addMessage('user', userMessage);
  messages.value = [...chatStore.messages];

  inputMessage.value = '';

  // 准备 AI 回复
  let aiResponse = '';
  chatStore.addMessage('assistant', '');

  // 调用流式 API
  await sendMessageStream(chatStore.messages, (chunk) => {
    aiResponse += chunk;
    chatStore.messages[chatStore.messages.length - 1].content = aiResponse;
    messages.value = [...chatStore.messages];
  });
}
</script>