<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <!-- 可選：用于模板渲染 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- 可選：簡化代碼 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <scope>provided</scope>
    </dependency>
</dependencies>

package com.example.websocketdemo;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * WebSocket 配置類
 * @EnableWebSocketMessageBroker 注解啟用 STOMP 消息代理功能。
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    /**
     * 配置消息代理（Message Broker）
     * 消息代理負責處理來自客戶端的消息，并將消息廣播給訂閱了特定目的地的客戶端。
     *
     * @param config MessageBrokerRegistry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 1. 啟用一個簡單的內(nèi)存消息代理，用于處理以 "/topic" 或 "/queue" 開頭的消息。
        //    - "/topic" 通常用于**發(fā)布/訂閱**模式（一對多廣播）。
        //    - "/queue" 通常用于**點對點**模式（一對一，但多個訂閱者時會負載均衡）。
        config.enableSimpleBroker("/topic", "/queue");

        // 2. 定義應用目的地前綴。
        //    所有以 "/app" 開頭的 STOMP 消息都會被路由到帶有 @MessageMapping 注解的控制器方法中。
        //    例如：客戶端發(fā)送到 "/app/hello" 的消息會被 @MessageMapping("/hello") 的方法處理。
        config.setApplicationDestinationPrefixes("/app");

        // (可選) 設置用戶目的地前綴 (用于用戶特定消息)
        // config.setUserDestinationPrefix("/user");
    }

    /**
     * 注冊 STOMP 協(xié)議的 WebSocket 端點。
     * 客戶端通過這些端點與服務器建立 WebSocket 連接。
     *
     * @param registry StompEndpointRegistry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 1. 注冊一個名為 "/ws" 的端點。
        //    客戶端將連接到 "ws://<server>:<port>/ws" (HTTP) 或 "wss://<server>:<port>/ws" (HTTPS)。
        registry.addEndpoint("/ws")

                // 2. 啟用 SockJS 作為后備機制。
                //    SockJS 是一個 JavaScript 庫，它在瀏覽器不支持原生 WebSocket 時，
                //    會嘗試使用其他技術（如輪詢）來模擬 WebSocket 行為，提高兼容性。
                //    客戶端連接時，如果使用 SockJS，URL 會是 "/ws/sockjs/info" 等。
                .withSockJS();

        // (可選) 可以注冊多個端點
        // registry.addEndpoint("/another-endpoint").withSockJS();
    }
}

package com.example.websocketdemo.model;

import lombok.Data;
import lombok.AllArgsConstructor;

/**
 * 消息實體類
 */
@Data
@AllArgsConstructor
public class Message {
    private String content; // 消息內(nèi)容
    private String sender;  // 發(fā)送者
    private long timestamp; // 時間戳

    // 無參構造函數(shù)（JSON 反序列化需要）
    public Message() {}

    // (可選) 可以添加更多字段，如消息類型、接收者等
}

package com.example.websocketdemo;

import com.example.websocketdemo.model.Message;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;

import java.time.Instant;

/**
 * WebSocket 消息處理控制器
 */
@Controller // 使用 @Controller 而不是 @RestController，因為通常不直接返回 HTTP 響應
public class WebSocketController {

    // SimpMessagingTemplate 用于從服務器端任意位置向客戶端發(fā)送消息
    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    /**
     * 處理客戶端發(fā)送到 "/app/hello" 的消息。
     * 此方法將處理消息，并將處理后的結(jié)果廣播給所有訂閱了 "/topic/greetings" 的客戶端。
     *
     * @param message 客戶端發(fā)送的原始消息 (Message 對象)
     * @return 處理后的消息 (Message 對象) - 這個返回值會被 @SendTo 指定的目的地接收
     * @throws Exception
     */
    @MessageMapping("/hello") // 監(jiān)聽目的地 "/app/hello"
    @SendTo("/topic/greetings") // 將方法返回值發(fā)送到 "/topic/greetings"
    public Message greeting(@Payload Message message) throws Exception {
        // 模擬一些處理延遲
        Thread.sleep(1000);

        // 返回一個處理后的消息，包含原內(nèi)容、發(fā)送者和當前時間戳
        return new Message(
                "Hello, " + HtmlUtils.htmlEscape(message.getSender()) + "!",
                "Server",
                Instant.now().toEpochMilli()
        );
    }

    /**
     * 處理客戶端發(fā)送到 "/app/chat" 的消息。
     * 這個方法展示了如何使用 SimpMessagingTemplate 進行更靈活的消息發(fā)送。
     * 它不會返回值給 @SendTo，而是直接使用 messagingTemplate 發(fā)送消息。
     *
     * @param message 客戶端發(fā)送的聊天消息
     */
    @MessageMapping("/chat")
    public void handleChatMessage(@Payload Message message) {
        // 可以在這里進行消息驗證、存儲到數(shù)據(jù)庫等操作
        // ...

        // 使用 SimpMessagingTemplate 將消息廣播給所有訂閱了 "/topic/chat" 的客戶端
        messagingTemplate.convertAndSend("/topic/chat", message);

        // (示例) 向特定用戶發(fā)送消息 (需要配置用戶目的地前綴)
        // messagingTemplate.convertAndSendToUser("username", "/queue/private", privateMessage);
    }

    /**
     * (可選) 示例：從服務器內(nèi)部其他地方（如定時任務、服務）觸發(fā)消息發(fā)送
     */
    // @Scheduled(fixedRate = 5000)
    // public void sendServerTime() {
    //     Message timeMessage = new Message("Server Time: " + Instant.now(), "System", Instant.now().toEpochMilli());
    //     messagingTemplate.convertAndSend("/topic/greetings", timeMessage);
    // }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>Spring Boot WebSocket Demo</title>
    <!-- 引入 SockJS 客戶端庫 (如果配置了 withSockJS) -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <!-- 引入 STOMP 客戶端庫 -->
    <script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@6.1.0/bundles/stomp.umd.min.js"></script>
    <!-- (可選) Bootstrap 用于美化 -->
    <link
       rel="external nofollow" 
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container mt-5">
      <h1>WebSocket Chat & Greeting Demo</h1>

      <div class="row">
        <div class="col-md-6">
          <h3>Send Greeting</h3>
          <form id="greetingForm">
            <div class="mb-3">
              <label for="greetingSender" class="form-label">Your Name:</label>
              <input
                type="text"
                class="form-control"
                id="greetingSender"
                placeholder="Enter your name"
                required
              />
            </div>
            <button type="submit" class="btn btn-primary">Send Greeting</button>
          </form>
        </div>

        <div class="col-md-6">
          <h3>Chat Room</h3>
          <form id="chatForm">
            <div class="mb-3">
              <label for="chatSender" class="form-label">Nickname:</label>
              <input
                type="text"
                class="form-control"
                id="chatSender"
                placeholder="Enter nickname"
                required
              />
            </div>
            <div class="mb-3">
              <label for="chatMessage" class="form-label">Message:</label>
              <textarea
                class="form-control"
                id="chatMessage"
                rows="3"
                placeholder="Type your message..."
                required
              ></textarea>
            </div>
            <button type="submit" class="btn btn-success">Send Message</button>
          </form>
        </div>
      </div>

      <div class="row mt-4">
        <div class="col-md-6">
          <h3>Greetings Received</h3>
          <ul id="greetingList" class="list-group"></ul>
        </div>
        <div class="col-md-6">
          <h3>Chat Messages</h3>
          <ul id="chatList" class="list-group"></ul>
        </div>
      </div>
    </div>

    <!-- 引入自定義 JavaScript -->
    <script th:src="@{/js/app.js}"></script>
  </body>
</html>

// 定義全局變量
let stompClient = null
let connected = false

// 頁面加載完成后執(zhí)行
document.addEventListener("DOMContentLoaded", function () {
  connect()
})

// 連接到 WebSocket 服務器
function connect() {
  // 1. 創(chuàng)建 SockJS 實例，連接到后端配置的端點 "/ws"
  //    如果后端沒有配置 withSockJS，則使用 new WebSocket("ws://localhost:8080/ws");
  const socket = new SockJS("/ws") // 注意：路徑是相對于當前頁面的，這里假設在根路徑

  // 2. 使用 SockJS 實例創(chuàng)建 STOMP 客戶端
  stompClient = Stomp.over(socket)

  // 3. 連接到 STOMP 代理
  stompClient.connect(
    {},
    function (frame) {
      console.log("Connected: " + frame)
      connected = true
      // 更新 UI 狀態(tài) (可選)
      // document.getElementById('connectionStatus').innerHTML = 'Connected';

      // 4. 訂閱目的地 "/topic/greetings"
      //    當服務器向 "/topic/greetings" 發(fā)送消息時，onGreetingReceived 函數(shù)會被調(diào)用
      stompClient.subscribe("/topic/greetings", onGreetingReceived)

      // 5. 訂閱目的地 "/topic/chat"
      stompClient.subscribe("/topic/chat", onChatMessageReceived)
    },
    function (error) {
      console.error("Connection error: " + error)
      connected = false
      // 重連邏輯 (可選)
      // setTimeout(function() { connect(); }, 5000);
    }
  )
}

// 處理從 "/topic/greetings" 接收到的消息
function onGreetingReceived(payload) {
  const message = JSON.parse(payload.body)
  const greetingList = document.getElementById("greetingList")
  const item = document.createElement("li")
  item.textContent = `[${new Date(message.timestamp).toLocaleTimeString()}] ${
    message.sender
  }: ${message.content}`
  item.className = "list-group-item list-group-item-info"
  greetingList.appendChild(item)
  // 自動滾動到底部
  greetingList.scrollTop = greetingList.scrollHeight
}

// 處理從 "/topic/chat" 接收到的消息
function onChatMessageReceived(payload) {
  const message = JSON.parse(payload.body)
  const chatList = document.getElementById("chatList")
  const item = document.createElement("li")
  item.textContent = `[${new Date(message.timestamp).toLocaleTimeString()}] ${
    message.sender
  }: ${message.content}`
  item.className = "list-group-item"
  chatList.appendChild(item)
  chatList.scrollTop = chatList.scrollHeight
}

// 處理 "Send Greeting" 表單提交
document
  .getElementById("greetingForm")
  .addEventListener("submit", function (event) {
    event.preventDefault() // 阻止表單默認提交行為
    const senderInput = document.getElementById("greetingSender")
    const sender = senderInput.value.trim()
    if (sender && connected) {
      // 發(fā)送消息到目的地 "/app/hello"
      // 消息體是一個 JSON 字符串
      stompClient.send(
        "/app/hello",
        {},
        JSON.stringify({ sender: sender, content: "Greeting Request" })
      )
      senderInput.value = "" // 清空輸入框
    } else if (!connected) {
      alert("WebSocket not connected!")
    }
  })

// 處理 "Send Message" 表單提交
document
  .getElementById("chatForm")
  .addEventListener("submit", function (event) {
    event.preventDefault()
    const senderInput = document.getElementById("chatSender")
    const messageInput = document.getElementById("chatMessage")
    const sender = senderInput.value.trim()
    const content = messageInput.value.trim()
    if (sender && content && connected) {
      // 發(fā)送消息到目的地 "/app/chat"
      const chatMessage = {
        sender: sender,
        content: content,
        timestamp: new Date().getTime(), // 客戶端時間戳，服務器會用自己的
      }
      stompClient.send("/app/chat", {}, JSON.stringify(chatMessage))
      // 清空輸入框
      messageInput.value = ""
      // (可選) 立即將消息顯示在本地聊天列表（回顯），服務器廣播后會再次收到
      // onChatMessageReceived({body: JSON.stringify(chatMessage)});
    } else if (!connected) {
      alert("WebSocket not connected!")
    }
  })

// (可選) 斷開連接函數(shù)
function disconnect() {
  if (stompClient) {
    stompClient.disconnect()
    connected = false
    console.log("Disconnected")
    // 更新 UI 狀態(tài)
    // document.getElementById('connectionStatus').innerHTML = 'Disconnected';
  }
}

// 頁面卸載時斷開連接
window.addEventListener("beforeunload", function () {
  disconnect()
})

// 在 WebSocketConfig 中
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    // 配置應用目的地前綴
    config.setApplicationDestinationPrefixes("/app");
    // 配置用戶目的地前綴
    config.setUserDestinationPrefix("/user");

    // 啟用 STOMP 代理中繼，連接到外部的 Broker
    config.enableStompBrokerRelay("/topic", "/queue")
          .setRelayHost("localhost") // 外部 Broker 的主機
          .setRelayPort(61613)      // STOMP 端口 (RabbitMQ 默認 61613)
          .setClientLogin("guest")  // Broker 用戶名
          .setClientPasscode("guest"); // Broker 密碼
}