WebSocket Tutorial

基于 Spring Boot 的 WebSocket 入门教程，包含两个循序渐进的示例项目。

项目结构

websocket-tutorial/
├── echo/           # 入门：单连接 Echo 回显
└── chat-room/      # 进阶：多连接广播聊天室

模块说明

echo — WebSocket 基础

最简单的 WebSocket 示例，服务端将收到的消息原样回传。

• 后端：Spring Boot 3.2 + spring-boot-starter-websocket
• 前端：纯 HTML/JS，无框架依赖
• 端点：ws://localhost:8080/ws/echo

cd echo/echo-backend
mvn spring-boot:run
# 然后用浏览器打开 echo/echo-frontend/index.html

详细教程：echo/docs/websocket-tutorial.md

---

chat-room — 多人聊天室

在 echo 基础上进阶，支持多连接并发、消息广播、上下线通知、图片发送。

• 后端：Spring Boot 3.2，Session 管理 + 广播
• 前端：Vite + React + Ant Design
• 端点：ws://localhost:8080/ws/chat?username=Alice

# 后端
cd chat-room/chat-room-backend
mvn spring-boot:run

# 前端
cd chat-room/chat-room-frontend
npm install
npm run dev
# 访问 http://localhost:5173

详细教程：chat-room/docs/websocket-tutorial.md

---

技术栈

层	技术
后端	Java 17, Spring Boot 3.2
前端（echo）	原生 HTML/JS
前端（chat-room）	Vite, React, Ant Design
协议	WebSocket (RFC 6455)