chatroom_stage1_summary

📌 聊天室项目 - 第一阶段总结

🎯 阶段目标

• 搭建一个基于 Spring Boot + WebSocket (SockJS + STOMP)
  的简易聊天室。
• 实现多人实时聊天功能，不同浏览器之间能够互相发送消息。
• 支持用户输入昵称，在聊天框中显示”昵称: 消息内容”。

---

🖥️ 后端部分

1. ChatMessage.java —— 消息对象

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ChatMessage {
    private String sender;   // 发送者昵称
    private String content;  // 消息内容
}

2. WebSocketConfig.java —— WebSocket 配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 订阅前缀
        config.setApplicationDestinationPrefixes("/app"); // 应用前缀
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat-websocket").withSockJS(); // 前端连接入口
    }
}

3. ChatController.java —— 消息处理器

@Controller
public class ChatController {

    @MessageMapping("/chat") // 前端发到 /app/chat
    @SendTo("/topic/messages") // 广播给所有订阅 /topic/messages 的客户端
    public ChatMessage send(ChatMessage message) {
        System.out.println("收到消息：" + message.getContent());
        return message;
    }
}

---

🌐 前端部分 (chat.html)

1. 连接 WebSocket

const socket = new SockJS('/chat-websocket');
stompClient = Stomp.over(socket);

stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/messages', function(response) {
        const message = JSON.parse(response.body);
        showMessage(message.sender + ": " + message.content);
    });
});

2. 发送消息

stompClient.send("/app/chat", {}, JSON.stringify({
    sender: username,
    content: msg
}));

3. 显示消息

function showMessage(message) {
    const chatBox = document.getElementById("chat-box");
    chatBox.innerHTML += message + "<br>";
    chatBox.scrollTop = chatBox.scrollHeight; // 自动滚动到底部
}

---

🔄 消息流转时序图

sequenceDiagram
    participant A as 浏览器A
    participant WS as Spring WebSocket服务器
    participant B as 浏览器B

    A->>WS: ① 连接 /chat-websocket
    B->>WS: ① 连接 /chat-websocket
    Note over A, B: 两个浏览器都建立 WebSocket 长连接

    A->>WS: ② 发送消息到 /app/chat\n(sender: "yang", content: "hello")
    WS->>WS: ③ ChatController 处理消息
    WS->>B: ④ 广播消息到 /topic/messages\n{"sender":"yang","content":"hello"}
    WS->>A: ④ 广播消息到 /topic/messages\n{"sender":"yang","content":"hello"}

    B->>B: ⑤ 前端订阅收到消息，显示到聊天框
    A->>A: ⑤ 自己也收到消息，显示到聊天框

---

✅ 阶段总结

• 前端：通过 SockJS + STOMP 建立连接，订阅消息，发送消息。
• 后端：通过 @MessageMapping 接收消息，@SendTo 广播消息。
• 效果：支持多人实时聊天，消息会显示发送者昵称。

---

🔜 下一步计划

1. 消息持久化：将聊天记录存储到 MySQL，并支持历史消息查询。\
2. 用户系统：实现注册/登录，使用 JWT
   做鉴权，保证昵称和身份唯一性。\
3. 群聊 / 私聊：支持多个房间和点对点消息。\
4. 分布式改造：使用 Redis Pub/Sub 实现多实例部署。