本期内容

1. 消息发送和消息订阅
2. 等待回复的加载动画（animation+ @keyframes）
3. markdown 格式消息展示
4. 消息列表切换过渡（<transition-group></transition-group>）

代码实现

等待加载动画

当用户发送完消息等待 ChatGPT 回复的过程中有一些延迟，我们需要写一个文字加载的动画告知用户等待回复。

本期内容

1. 使用 Websocket Stomp 协议配合@MessageMapping和@Payload 开放消息接口，和接收 JSON 请求体。
2. 实现私有订阅，服务器将请求的结果响应给对应的用户，而不是广播给所有用户。
3. 使用 Proxy 将请求转发给 OpenAI。
4. 对代码进行逻辑分层，让代码更清晰。

代码实现

1. WebsocketController 接收消息

与 MVC 中的 Controller 不同，这边不能使用@RestController需要用@Controller。@AllArgsConstructor是 lombok 提供的一个为类中的属性生成构成器的注解。这样我们可以方便的使用 Spring 推荐的构造器依赖注入。