从零到一：用 FastAPI + WebSocket 搭建你的实时 DeepSeek AI 聊天助手 (保姆级教程)

大家好！最近大语言模型 (LLM) 风靡全球，无论是 ChatGPT、Claude 还是国内的各种优秀模型，都展示了 AI 惊人的能力。你是否也曾想过，搭建一个属于自己的、能够实时对话的 AI 聊天应用呢？

今天，我就将手把手带你，使用 FastAPI (一个高性能的 Python Web 框架)、WebSockets (实现实时双向通信) 以及 DeepSeek (一个强大的国产 AI 模型) 的 API，构建一个拥有炫酷科技感界面、支持 Markdown、并且能够流式输出的 AI 聊天助手！

本文的目标是保姆级教学，确保即使你是后端或前端新手，也能跟着步骤轻松复现。

项目效果预览

核心技术栈

• 后端: Python 3.8+, FastAPI, Uvicorn, httpx, python-dotenv
• 前端: HTML, CSS, JavaScript
• AI 服务: DeepSeek API
• 实时通信: WebSockets
• Markdown 渲染: marked.js
• 代码高亮: highlight.js

准备工作 (Prerequisites)

在开始之前，请确保你已经准备好了以下环境和工具：

1. Python 3.8 或更高版本: 确保你的电脑安装了 Python。可以在终端输入 查看。
2. Pip: Python 的包管理器，通常会随 Python 一起安装。
3. DeepSeek API Key: 你需要注册 DeepSeek 开放平台并获取一个 API Key。访问 DeepSeek 开放平台 注册并创建你的 Key。
4. 代码编辑器: 推荐使用 VS Code, PyCharm 或任何你喜欢的代码编辑器。
5. 现代浏览器: 如 Chrome, Firefox, Edge 等。

架构概览

我们的应用分为两部分：

1. 前端 (Frontend): 一个用 HTML/CSS/JavaScript 编写的网页。用户在这个页面输入问题，并实时看到 AI 的回复。
2. 后端 (Backend): 一个用 Python/FastAPI 编写的服务器。
   • 它通过 WebSocket 与前端保持长连接。
   • 接收前端发来的用户消息。
   • 调用 DeepSeek API 获取 AI 回复。
   • 将 AI 的回复通过 WebSocket 流式传回前端。

动手实践：一步步搭建

第 1 步：创建项目并设置环境

首先，创建一个新的项目文件夹，并设置 Python 虚拟环境（这是一个好习惯，可以隔离项目依赖）。

第 2 步：配置 DeepSeek API Key

为了安全地使用你的 API Key，我们将其存储在环境变量中。

1. 在项目根目录 () 下创建一个名为 的文件。
2. 在该文件中添加以下内容，并将 替换为你自己的 Key：

第 3 步：编写后端代码 ()

在项目根目录下创建一个名为 的文件，并将我们之前调试好的后端代码粘贴进去。这段代码负责启动服务器、处理 WebSocket 连接以及与 DeepSeek API 通信。

第 4 步：编写前端代码 ()

在项目根目录下创建一个名为 的文件。

第 5 步：运行你的聊天应用

现在，万事俱备！

1. 启动后端服务器:
   • 确保你的 Python 虚拟环境已激活。
   • 在项目根目录 () 下的终端中运行：

   • 你应该能看到类似 的输出，并且 。
2. 打开前端页面:
   • 在你的文件管理器中找到 文件。
   • 直接用你的网页浏览器打开它 (双击即可)。
3. 开始聊天:
   • 如果一切顺利，页面会显示 “(已连接)”。
   • 在输入框中输入你的问题，点击“发送”或按 Enter 键。
   • 观看 DeepSeek AI 实时流式输出的、带有 Markdown 格式和代码高亮的回答吧！

代码核心解读

• :
  • DeepSeek 教程: 这是我们后端的核心，它定义了一个 WebSocket 端点。
  • : 接受来自前端的连接。
  • : 等待并接收前端发来的消息。
  • : 异步地从 获取数据块。
  • : 将收到的 AI 数据块（包装成 JSON）发送回前端。
• :
  • : 建立与后端的 WebSocket 连接。
  • : 监听后端发来的消息。这是接收 AI 回复的关键。
  • : 解析后端发来的 JSON 数据。
  • : 累积 AI 的回复内容。
  • : 使用 将累积的 Markdown 文本转换为 HTML。
  • : 使用 对渲染后的代码块进行高亮。
  • : 将用户输入发送给后端。

总结与展望

恭喜你！你已经成功搭建了一个功能齐全、界面炫酷、支持流式输出和 Markdown 的 AI 聊天应用。这是一个很棒的起点！

接下来你可以尝试什么？

• 部署上线: 将你的 FastAPI 应用部署到云服务器，让任何人都能访问。
• 保存对话历史: 实现将聊天记录保存到数据库或本地文件的功能。
• 用户认证: 添加用户登录注册功能。
• “停止生成”按钮: 添加一个可以中断 AI 输出的功能。
• 更多模型支持: 尝试接入或封装其他大语言模型。

希望这篇保姆级教程能帮助你开启 AI 应用开发之旅。如果你在复现过程中遇到任何问题，或者有任何想法和建议，欢迎在评论区留言交流！