<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

@Configuration
@EnableWebSocketMessageBroker // 開啟WebSocket消息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 客戶端將通過這個URL來連接WebSocket端點
        registry.addEndpoint("/ws-notification")
                .setAllowedOriginPatterns("*") // 注意：生產(chǎn)環(huán)境應(yīng)指定具體域名
                .withSockJS(); // 啟用SockJS后備選項，增強兼容性
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 啟用一個簡單的基于內(nèi)存的消息代理，負(fù)責(zé)向客戶端推送消息
        registry.enableSimpleBroker("/topic"); // 客戶端訂閱以/topic開頭的地址
        // 定義應(yīng)用自身的目的地前綴，客戶端發(fā)送消息到服務(wù)端時使用
        registry.setApplicationDestinationPrefixes("/app");
    }
}

@Service
public class NotificationService {

    @Autowired
    private SimpMessagingTemplate messagingTemplate; // Spring提供的消息發(fā)送模板

    /**
     * 廣播新訂單給所有訂閱的客戶端（例如大屏監(jiān)控）
     */
    public void broadcastNewOrder(String orderNumber) {
        // 將消息發(fā)送到 /topic/new-orders，所有訂閱了該目的地的客戶端都會收到
        messagingTemplate.convertAndSend("/topic/new-orders", "新訂單: " + orderNumber);
    }

    /**
     * 私信特定用戶（例如客服端）
     */
    public void notifyUser(String userId, String message) {
        // 發(fā)送到用戶專屬的隊列，Spring會自動將其路由為 /user/{userId}/topic/notification
        messagingTemplate.convertAndSendToUser(userId, "/topic/notification", message);
    }
}

npm install sockjs-client stompjs

// utils/websocket.js
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

let stompClient = null;
let reconnectTimer = null;
const RETRY_INTERVAL = 5000; // 重連間隔5秒

/**
 * 連接WebSocket
 * @param {string} topic 訂閱的消息主題
 * @param {Function} onMessageCallback 收到消息時的回調(diào)函數(shù)
 * @param {Function} refreshCallback 連接成功后的回調(diào)（如刷新列表）
 */
export function connectWebSocket(topic, onMessageCallback, refreshCallback) {
  const socket = new SockJS(import.meta.env.VITE_WS_ENDPOINT || 'http://localhost:8080/ws-notification');
  stompClient = Stomp.over(socket);

  stompClient.connect({},
    // 連接成功回調(diào)
    () => {
      console.log('WebSocket連接成功');
      if (reconnectTimer) clearTimeout(reconnectTimer);

      // 訂閱指定的主題
      stompClient.subscribe(`/topic/${topic}`, (message) => {
        onMessageCallback(message.body);
        refreshCallback?.(); // 可選：收到消息后觸發(fā)數(shù)據(jù)刷新
      });

      refreshCallback?.(); // 連接成功時也刷新一次數(shù)據(jù)
    },
    // 連接失敗回調(diào)
    (error) => {
      console.error('WebSocket連接失敗，嘗試重連...', error);
      scheduleReconnect(topic, onMessageCallback, refreshCallback);
    }
  );
}

// 安排定時重連
function scheduleReconnect(topic, onMessageCallback, refreshCallback) {
  if (reconnectTimer) clearTimeout(reconnectTimer);
  reconnectTimer = setTimeout(() => {
    connectWebSocket(topic, onMessageCallback, refreshCallback);
  }, RETRY_INTERVAL);
}

// 斷開連接
export function disconnectWebSocket() {
  if (stompClient) {
    stompClient.disconnect();
    console.log('WebSocket連接已斷開');
  }
  if (reconnectTimer) clearTimeout(reconnectTimer);
}

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { ElNotification } from 'element-plus'; // 使用Element Plus的提示組件
import { connectWebSocket, disconnectWebSocket } from '@/utils/websocket';

const orderList = ref([]);

// 收到新訂單通知后的處理
const showNewOrderNotification = (message) => {
  ElNotification({
    title: '?? 新訂單提醒',
    type: 'success',
    message: message,
    duration: 0, // 不自動關(guān)閉，重要訂單提醒
  });
  // 可以在這里播放提示音
};

// 刷新訂單列表數(shù)據(jù)
const refreshOrderList = () => {
  // 這里調(diào)用你的API來獲取最新訂單列表
  console.log('刷新訂單列表數(shù)據(jù)...');
  // fetchOrders().then(data => orderList.value = data);
};

onMounted(() => {
  // 組件掛載時，連接WebSocket并訂閱"new-orders"主題
  connectWebSocket('new-orders', showNewOrderNotification, refreshOrderList);
});

onBeforeUnmount(() => {
  // 組件銷毀前，斷開連接，清理資源
  disconnectWebSocket();
});
</script>

<template>
  <div>
    <!-- 你的訂單列表UI -->
    <div v-for="order in orderList" :key="order.id">
      {{ order.number }}
    </div>
  </div>
</template>

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        # 代理你的Vue應(yīng)用靜態(tài)資源
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /ws-notification {
        proxy_pass http://backend-server:8080; # 你的Spring Boot應(yīng)用地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # 關(guān)鍵：升級協(xié)議頭
        proxy_set_header Connection "Upgrade"; # 關(guān)鍵：連接升級
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 3600s; # WebSocket連接超時時間設(shè)置長一些
    }

    # 其他API請求也代理到后端
    location /api/ {
        proxy_pass http://backend-server:8080;
    }
}

@Component
public class AuthChannelInterceptor implements ChannelInterceptor {

    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
        
        // 攔截CONNECT命令，進行身份驗證
        if (StompCommand.CONNECT.equals(accessor.getCommand())) {
            // 從Header中獲取Token
            List<String> authHeaders = accessor.getNativeHeader("Authorization");
            String token = (authHeaders != null && !authHeaders.isEmpty()) ? authHeaders.get(0) : null;

            if (token == null || !TokenUtil.verify(token)) {
                throw new IllegalArgumentException("未經(jīng)授權(quán)的連接請求");
            }

            // 驗證通過，將用戶信息存入會話，后續(xù)可通過@MessageMapping方法中的Principal參數(shù)獲取
            String username = TokenUtil.extractUsername(token);
            accessor.setUser(new UsernamePasswordAuthenticationToken(username, null, new ArrayList<>()));
        }
        return message;
    }
}

@Override
public void configureClientInboundChannel(ChannelRegistration registration) {
    registration.interceptors(new AuthChannelInterceptor());
}

// 在連接時，將登錄后獲取的Token放入Header
stompClient.connect(
  { 
    Authorization: `Bearer ${getToken()}` // 例如: "Bearer eyJhbGciOiJIUzI1NiIsInR5..."
  }, 
  // ... 其他回調(diào)不變
);