利用Vue3 + SpringBoot打造高效Web实时消息推送系统

<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("*") // 注意：生产环境应指定具体域名
                .withSockJS(); // 启用SockJS后备选项，增强兼容性
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 启用一个简单的基于内存的消息代理，负责向客户端推送消息
        registry.enableSimpleBroker("/topic"); // 客户端订阅以/topic开头的地址
        // 定义应用自身的目的地前缀，客户端发送消息到服务端时使用
        registry.setApplicationDestinationPrefixes("/app");
    }
}

@Service
public class NotificationService {

    @Autowired
    private SimpMessagingTemplate messagingTemplate; // Spring提供的消息发送模板

    /**
     * 广播新订单给所有订阅的客户端（例如大屏监控）
     */
    public void broadcastNewOrder(String orderNumber) {
        // 将消息发送到 /topic/new-orders，所有订阅了该目的地的客户端都会收到
        messagingTemplate.convertAndSend("/topic/new-orders", "新订单: " + orderNumber);
    }

    /**
     * 私信特定用户（例如客服端）
     */
    public void notifyUser(String userId, String message) {
        // 发送到用户专属的队列，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 收到消息时的回调函数
 * @param {Function} refreshCallback 连接成功后的回调（如刷新列表）
 */
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({},
    // 连接成功回调
    () => {
      console.log('WebSocket连接成功');
      if (reconnectTimer) clearTimeout(reconnectTimer);

      // 订阅指定的主题
      stompClient.subscribe(`/topic/${topic}`, (message) => {
        onMessageCallback(message.body);
        refreshCallback?.(); // 可选：收到消息后触发数据刷新
      });

      refreshCallback?.(); // 连接成功时也刷新一次数据
    },
    // 连接失败回调
    (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, // 不自动关闭，重要订单提醒
  });
  // 可以在这里播放提示音
};

// 刷新订单列表数据
const refreshOrderList = () => {
  // 这里调用你的API来获取最新订单列表
  console.log('刷新订单列表数据...');
  // 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应用静态资源
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /ws-notification {
        proxy_pass http://backend-server:8080; # 你的Spring Boot应用地址
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # 关键：升级协议头
        proxy_set_header Connection "Upgrade"; # 关键：连接升级
        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连接超时时间设置长一些
    }

    # 其他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("未经授权的连接请求");
            }

            // 验证通过，将用户信息存入会话，后续可通过@MessageMapping方法中的Principal参数获取
            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..."
  }, 
  // ... 其他回调不变
);