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

🎯 阶段目标

用 Spring Boot 提供 WebSocket（基于 STOMP）后端接口。
用 Vue（Vite） 做前端，与后端前后端分离地通信（SockJS + STOMP）。
实现：昵称、房间、实时消息收发、前端显示、前后端跨域/代理问题处理。
为后续接入数据库持久化、房间隔离、用户上下线、分布式改造打基础。

整体架构

前端（Vue）通过 SockJS 建立到 /chat-websocket 的 STOMP 长连接 → 订阅 /topic/... 接收广播 → 发送消息到 /app/... → 后端 @MessageMapping 接收并处理（可保存 DB）→ 后端广播到对应 /topic/...。

时序图

sequenceDiagram
    participant U as 用户（浏览器）
    participant V as Vue (SockJS + STOMP)
    participant S as Spring Boot 后端
    participant B as STOMP Broker (/topic)

    U->>V: 输入昵称，点击连接
    V->>S: SockJS 连接 /chat-websocket
    S-->>V: STOMP CONNECTED

    V->>B: 订阅 /topic/chatroom/{roomId}
    Note right of V: 客户端开始监听房间消息

    U->>V: 输入消息，点击发送
    V->>S: SEND /app/chat/{roomId}\n{sender, content}
    S->>S: 保存消息到数据库
    S->>B: convertAndSend(/topic/chatroom/{roomId}, message)

    B-->>V: 推送 message JSON
    V-->>U: 页面渲染消息

步骤 0 — 环境与依赖

为何要：保证能运行 Spring Boot 与 Vite（Vue）前端。
怎么做：

后端：JDK15+，Spring Boot，spring-boot-starter-web、spring-boot-starter-websocket。
前端：Node.js，Vite + Vue3，sockjs-client、stompjs。

常见坑：Node 版本太低，Lombok 未启用导致编译不过。

步骤 1 — 后端最小实现

目的：快速验证 WebSocket + STOMP 的端到端流程。

@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/topic");
    config.setApplicationDestinationPrefixes("/app");
  }
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/chat-websocket").setAllowedOriginPatterns("*").withSockJS();
  }
}

1
2
3

@MessageMapping("/chat")
@SendTo("/topic/messages")
public ChatMessage send(ChatMessage message) { return message; }

步骤 2 — 前端原生验证

关键点：快速看能否收发消息。

const socket = new SockJS('/chat-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, frame => {
  stompClient.subscribe('/topic/messages', res => {
    const msg = JSON.parse(res.body);
    showMessage(msg.sender + ": " + msg.content);
  });
});
stompClient.send('/app/chat', {}, JSON.stringify({ sender: 'A', content: 'hi' }));

步骤 3 — Vue + Vite 前端

迁移到 Vue3 模块化开发。

vite.config.js

server: { proxy: {
  '/chat-websocket': { target: 'http://localhost:8080', ws: true },
  '/app': { target: 'http://localhost:8080' },
  '/topic': { target: 'http://localhost:8080' }
}}

步骤 4 — Vue 组件

<template>
  <div class="chat-container">
    <h2>聊天室</h2>
    <input v-model="username" placeholder="昵称"/>
    <button @click="connect">连接</button>
    <div class="messages">
      <div v-for="(msg, idx) in messages" :key="idx">
        <b>{{ msg.sender }}</b>: {{ msg.content }}
      </div>
    </div>
    <div v-if="connected">
      <input v-model="message" @keyup.enter="sendMessage"/>
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>