文章目录
- 一、概述
- 二、技术栈一览
- 2.1 后端技术
- 2.2 AI 模型服务
- 2.3 前端技术
- 2.4 通信协议
- 三、环境准备
- 3.1 JDK 17+
- 3.2 Maven
- 3.3 获取阿里云 DashScope API Key
- 四、项目结构
- 五、第一步：创建 Maven 项目与目录结构
- 六、第二步：配置 pom.xml
- 七、第三步：配置 application.yml
- 八、第四步：配置 logback.xml
- 九、第五步：Spring Boot 启动类
- 十、第六步：核心——ChatController 开发
- 10.1 类声明与初始化
- 10.2 POST /api/chat 接口实现
- 10.3 核心流程解析
- 十一、第七步：前端页面开发
- 11.1 SSE 接收与分发
- 11.2 SSE 事件处理
- 11.3 Web Audio API 音频播放
- 十二、第八步：运行与测试
- 12.1 设置 API Key
- 12.2 启动应用
- 12.3 浏览器验证
- 十三、原理深度解析：为什么能「边生成边朗读」
- 十四、常见问题（FAQ）
- Q1：启动报错 "DASHSCOPE_API_KEY environment variable is required"
- Q2：前端能显示文字但没有声音
- Q3：Maven 下载依赖很慢
- Q4：语音播放卡顿或断断续续
- Q5：如何更换语音角色？
- Q6：如何修改 AI 的角色/提示词？
- 十五、总结
一、概述
近两年大语言模型（LLM）的爆发让 AI 聊天应用遍地开花，但大多数产品依然是「先生成完整文字，再一次性返回」的模式——用户需要等 AI 写完所有内容后才能看到结果。如果能像真人对话一样，AI边说边想、逐字输出，同时把文字实时转成语音朗读出来，用户体验将大幅提升。
本文将带你从零开始，用Java 17 + Spring Boot WebFlux + AgentScope 框架 + 阿里云 DashScope打造这样一个「边回复边朗读」的 AI 聊天应用。核心技术点包括：ReActAgent 流式推理、TTSHook 实时语音合成、SSE 双向推送、Web Audio API 前端音频播放。全程提供可运行的完整代码，零基础也能跟着一步步实现。
最终效果：浏览器打开页面 → 输入"你好" → AI 逐字显示回复 → 同时浏览器自动朗读生成内容 → 语音播放完毕后可点击按钮回放。
二、技术栈一览
2.1 后端技术
| 技术 | 版本 | 角色 |
|---|---|---|
| Java | 17+ | 编程语言 |
| < |
