文档由 ai 进行排期，我只是执行者而已以及对应的理解者而已吧
通信方式 | 核心特点 | 前端落地方式（react/vue） | 后端支撑（自身技术栈） | AI相关适用场景 |
|---|---|---|---|---|
WebSocket | 双向通信、实时性高、全双工、基于TCP，适合高频交互 | 使用 | nodejs（ws库）、rust（tokio-tungstenite）、go（gorilla/websocket）搭建WebSocket服务，衔接AI接口 | 语音实时转写、多模态实时交互、AI聊天流式输出（逐字返回） |
SSE（Server-Sent Events） | 单向通信（后端→前端）、轻量、基于HTTP，无需建立持久连接，适合后端推送流 | 使用 | nodejs（express）、rust（axum）、go（net/http）搭建SSE服务，转发AI流式接口响应 | AI文本流式输出（如问答逐字返回）、AI处理进度反馈（如图片生成进度） |
HTTP长轮询 | 半双向、基于HTTP，前端发起请求后，后端挂起连接，有结果再返回，适合低频交互 | react/vue使用axios发起请求，设置超时时间，接收结果后立即重新发起请求，维持连接 | nodejs、rust、go任意后端，处理AI接口请求，挂起连接直到有响应 | AI图片生成进度反馈、低频多模态交互（如上传图片后等待识别结果） |
周次 | 每日学习内容（1-2小时/天） | 结合自身技术栈 | 每日目标 | 周末案例 |
|---|---|---|---|---|
第1周（AI基础） | Day1：AI核心概念（极简版）、前端与AI的衔接逻辑 | 了解react/vue与AI的交互场景 | 掌握AI基础流程，明确前端在AI中的角色 | 案例1：用react/vue搭建简单的AI文本问答界面（调用公开AI接口，传统HTTP请求），实现“输入文本→返回AI回答” |
Day2：Python基础（聚焦AI接口调用），requests库使用 | 学习Python调用AI接口，返回JSON数据 | 能独立用Python调用OpenAI/通义千问API，获取文本响应 | ||
Day3：nodejs中间层入门，搭建简单的接口转发服务 | nodejs + express，转发Python AI接口请求 | 实现nodejs接口，接收前端请求，转发给Python，返回AI响应 | ||
Day4：react/vue封装AI请求工具，对接nodejs接口 | react（axios + hooks）、vue（axios + 组合式API） | 封装通用请求钩子，处理请求状态（加载、成功、失败） | ||
Day5：调试前端→nodejs→Python→AI接口的完整流程 | 排查接口调用中的跨域、数据格式问题 | 确保完整流程通顺，前端能正常获取AI文本响应 | ||
第2周（通信基础） | Day1：SSE核心原理、前端实现方式（EventSource） | react/vue封装useSSE钩子，处理SSE连接 | 掌握SSE单向通信逻辑，能接收后端推送的流式数据 | 案例2：基于SSE实现AI文本流式响应（react/vue），nodejs搭建SSE服务，转发AI流式接口，实现逐字显示回答 |
Day2：nodejs搭建SSE服务（express-sse），对接AI流式接口 | nodejs处理AI流式响应，通过SSE推送给前端 | 实现SSE服务，能向前端推送流式文本数据 | ||
Day3：WebSocket核心原理、前端实现方式（new WebSocket） | react/vue封装useWebSocket钩子，处理连接、重连 | 掌握WebSocket双向通信逻辑，能发送/接收数据 | ||
Day4：nodejs搭建WebSocket服务（ws库），实现双向通信 | nodejs接收前端请求，转发给AI接口，返回响应 | 实现WebSocket服务，能与前端双向通信 | ||
Day5：对比SSE、WebSocket、HTTP长轮询，明确适用场景 | 整理3种通信方式的封装代码，便于后续复用 | 能根据AI场景，选择合适的通信方式 |
周次 | 每日学习内容（1-2小时/天） | 结合自身技术栈 | 每日目标 | 周末案例 | |
|---|---|---|---|---|---|
第3周（文本多模态基础） | Day1：MCP skill多模态核心概念、前端落地场景 | 结合react/vue，梳理多模态交互界面的设计思路 | 明确多模态的核心是“多类型数据交互”，掌握前端角色 | 案例3：react/vue多模态文本交互界面，支持“文本输入+代码生成”，WebSocket通信，AI逐字返回代码，前端语法高亮 | |
Day2：AI代码生成接口调用（Python），处理代码格式 | Python调用AI接口，指定生成react/vue代码，返回格式化结果 | 能获取AI生成的前端代码，并处理成可渲染的格式 | |||
Day3：react/vue实现代码高亮组件，渲染AI生成的代码 | 使用react-syntax-highlighter、vue-syntax-highlighter | 能将AI返回的代码，以语法高亮的形式渲染在页面 | |||
Day4：WebSocket优化，处理代码流式返回的断行、格式问题 | react/vue封装代码流式渲染逻辑 | 实现代码逐行/逐字渲染，保持格式正确 | |||
Day5：调试多模态文本交互流程，优化用户体验 | 处理加载状态、错误提示、代码复制功能 | 确保交互流畅，代码渲染正确，支持复制使用 | |||
第4-5周（语音多模态） | Day1-2：前端语音采集（react/vue），MediaRecorder API使用 | react（react-audio-recorder）、vue（vue-audio-recorder） | 能实现前端语音采集，生成音频流/音频文件 | 案例4：react/vue语音多模态交互界面，支持“语音提问→AI语音识别→AI文本回答→AI语音合成→前端播放”，WebSocket实时通信，nodejs中间层处理音频流 | |
Day3-4：Python调用语音识别API（百度/阿里云），语音→文本 | Python接收前端音频流，转文本，传递给AI问答接口 | 能将前端采集的语音，转换为文本，用于AI提问 | |||
Day5：nodejs处理音频流，WebSocket传递音频数据 | nodejs接收前端音频流，转发给Python，处理数据格式 | 实现音频流的实时传递，确保数据不丢失 | |||
Day6-7：Python调用语音合成API，文本→语音 | Python将AI文本回答，转换为音频流，返回给nodejs | 能将AI回答的文本，转换为可播放的音频流 | |||
Day8-10：前端接收音频流，实时播放语音（react/vue） | react/vue使用Audio API，播放AI返回的音频流 | 实现语音实时播放，与文本回答同步展示 | |||
第6-7周（图片多模态） | Day1-2：前端图片上传（react/vue），图片压缩、格式转换 | react（antd Upload）、vue（element-plus Upload） | 能实现图片上传、预览、压缩，转换为Base64/Blob | 案例5：react/vue图片多模态交互界面，支持“图片上传→AI图片识别→文本描述→AI文本回答”，结合SSE反馈识别进度，WebSocket传递图片数据，nodejs处理图片 | |
Day3-4：nodejs处理图片（sharp库），压缩、格式转换 | nodejs接收前端图片，处理后转发给Python AI接口 | 能优化图片大小，适配AI接口的要求 | |||
Day5：Python调用图片识别API（百度/阿里云），获取图片描述 | Python将图片描述传递给AI问答接口，获取相关回答 | 能识别图片内容，生成文本描述，对接AI问答 | |||
Day6-7：SSE实现图片识别进度反馈，前端渲染进度条 | react/vue实现进度条组件，接收SSE推送的进度数据 | 能实时展示图片识别进度，提升用户体验 | |||
Day8-10：调试图片多模态流程，优化图片加载、识别速度 | 处理图片过大、识别超时等问题，添加错误提示 | 确保图片上传、识别、响应的完整流程流畅 | |||
第8周（多模态联动 + 通信优化） | Day1-2：多模态联动逻辑（语音+图片+文本），前端交互设计 | react/vue实现多模态输入界面（语音+图片+文本） | 能同时接收多种模态输入，封装统一的数据格式 | 案例6：react/vue多模态联动界面，支持“语音提问+图片上传+文本补充”，WebSocket传递多类型数据，nodejs处理多模态数据，AI结合三者给出响应，前端同步渲染文本、语音、图片 | |
Day3-4：nodejs优化，处理多模态数据（音频+图片+文本） | nodejs区分不同类型的数据，转发给对应的Python处理逻辑 | 能统一处理多模态数据，确保传递正确 | |||
Day5：WebSocket优化，处理多模态数据的并发传递 | react/vue优化通信钩子，处理多类型数据接收 | 实现多模态数据的并发传递，不冲突、不丢失 | |||
Day6-7：调试多模态联动流程，优化交互体验 | 处理多模态响应的同步展示，优化加载状态 | 确保多模态联动流畅，响应准确 | |||
Day8-10：整理多模态、通信相关的封装代码，形成工具库 | react/vue封装多模态组件、通信钩子，nodejs封装中间层工具 | 形成可复用的代码，便于后续项目使用 |
周次 | 每日学习内容（1-2小时/天） | 结合自身技术栈 | 每日目标 | 周末案例 | |
|---|---|---|---|---|---|
第3周（文本多模态基础） | Day1：MCP skill多模态核心概念、前端落地场景 | 结合react/vue，梳理多模态交互界面的设计思路 | 明确多模态的核心是“多类型数据交互”，掌握前端角色 | 案例3：react/vue多模态文本交互界面，支持“文本输入+代码生成”，WebSocket通信，AI逐字返回代码，前端语法高亮 | |
Day2：AI代码生成接口调用（Python），处理代码格式 | Python调用AI接口，指定生成react/vue代码，返回格式化结果 | 能获取AI生成的前端代码，并处理成可渲染的格式 | |||
Day3：react/vue实现代码高亮组件，渲染AI生成的代码 | 使用react-syntax-highlighter、vue-syntax-highlighter | 能将AI返回的代码，以语法高亮的形式渲染在页面 | |||
Day4：WebSocket优化，处理代码流式返回的断行、格式问题 | react/vue封装代码流式渲染逻辑 | 实现代码逐行/逐字渲染，保持格式正确 | |||
Day5：调试多模态文本交互流程，优化用户体验 | 处理加载状态、错误提示、代码复制功能 | 确保交互流畅，代码渲染正确，支持复制使用 | |||
第4-5周（语音多模态） | Day1-2：前端语音采集（react/vue），MediaRecorder API使用 | react（react-audio-recorder）、vue（vue-audio-recorder） | 能实现前端语音采集，生成音频流/音频文件 | 案例4：react/vue语音多模态交互界面，支持“语音提问→AI语音识别→AI文本回答→AI语音合成→前端播放”，WebSocket实时通信，nodejs中间层处理音频流 | |
Day3-4：Python调用语音识别API（百度/阿里云），语音→文本 | Python接收前端音频流，转文本，传递给AI问答接口 | 能将前端采集的语音，转换为文本，用于AI提问 | |||
Day5：nodejs处理音频流，WebSocket传递音频数据 | nodejs接收前端音频流，转发给Python，处理数据格式 | 实现音频流的实时传递，确保数据不丢失 | |||
Day6-7：Python调用语音合成API，文本→语音 | Python将AI文本回答，转换为音频流，返回给nodejs | 能将AI回答的文本，转换为可播放的音频流 | |||
Day8-10：前端接收音频流，实时播放语音（react/vue） | react/vue使用Audio API，播放AI返回的音频流 | 实现语音实时播放，与文本回答同步展示 | |||
第6-7周（图片多模态） | Day1-2：前端图片上传（react/vue），图片压缩、格式转换 | react（antd Upload）、vue（element-plus Upload） | 能实现图片上传、预览、压缩，转换为Base64/Blob | 案例5：react/vue图片多模态交互界面，支持“图片上传→AI图片识别→文本描述→AI文本回答”，结合SSE反馈识别进度，WebSocket传递图片数据，nodejs处理图片 | |
Day3-4：nodejs处理图片（sharp库），压缩、格式转换 | nodejs接收前端图片，处理后转发给Python AI接口 | 能优化图片大小，适配AI接口的要求 | |||
Day5：Python调用图片识别API（百度/阿里云），获取图片描述 | Python将图片描述传递给AI问答接口，获取相关回答 | 能识别图片内容，生成文本描述，对接AI问答 | |||
Day6-7：SSE实现图片识别进度反馈，前端渲染进度条 | react/vue实现进度条组件，接收SSE推送的进度数据 | 能实时展示图片识别进度，提升用户体验 | |||
Day8-10：调试图片多模态流程，优化图片加载、识别速度 | 处理图片过大、识别超时等问题，添加错误提示 | 确保图片上传、识别、响应的完整流程流畅 | |||
第8周（多模态联动 + 通信优化） | Day1-2：多模态联动逻辑（语音+图片+文本），前端交互设计 | react/vue实现多模态输入界面（语音+图片+文本） | 能同时接收多种模态输入，封装统一的数据格式 | 案例6：react/vue多模态联动界面，支持“语音提问+图片上传+文本补充”，WebSocket传递多类型数据，nodejs处理多模态数据，AI结合三者给出响应，前端同步渲染文本、语音、图片 | |
Day3-4：nodejs优化，处理多模态数据（音频+图片+文本） | nodejs区分不同类型的数据，转发给对应的Python处理逻辑 | 能统一处理多模态数据，确保传递正确 | |||
Day5：WebSocket优化，处理多模态数据的并发传递 | react/vue优化通信钩子，处理多类型数据接收 | 实现多模态数据的并发传递，不冲突、不丢失 | |||
Day6-7：调试多模态联动流程，优化交互体验 | 处理多模态响应的同步展示，优化加载状态 | 确保多模态联动流畅，响应准确 | |||
Day8-10：整理多模态、通信相关的封装代码，形成工具库 | react/vue封装多模态组件、通信钩子，nodejs封装中间层工具 | 形成可复用的代码，便于后续项目使用 |