Vue3结合SpringBoot打造一个高效Web实时消息推送系统

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

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-notification")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }


    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

@Service
public class NotificationService {
    @Autowired
    private SimpMessagingTemplate messagingTemplate;


    public void broadcastNewOrder(String orderNumber) {
        messagingTemplate.convertAndSend("/topic/new-orders", orderNumber);
    }


    public void notifyUser(String userId, String message) {
        messagingTemplate.convertAndSendToUser(userId, "/topic/notification", message);
    }
}

npm install sockjs-client stompjs

import SockJS from 'sockjs-client/dist/sockjs';
import Stomp from 'stompjs';


let stompClient = null;
let retryInterval = 5000;
let reconnectTimer = null;


function scheduleReconnect(type, notifyCallback, refreshCallback) {
  reconnectTimer = setTimeout(() => {
    connectWebSocket(type, notifyCallback, refreshCallback);
  }, retryInterval);
}


export function connectWebSocket(type, notifyCallback, refreshCallback) {
  const socket = new SockJS(import.meta.env.VITE_WS_ENDPOINT || "http://localhost:8083/ws-notification");
  stompClient = Stomp.over(socket);


  stompClient.connect({}, () => {
    if (reconnectTimer) clearTimeout(reconnectTimer);
    stompClient.subscribe(`/topic/${type}`, (msg) => {
      notifyCallback(msg.body);
      refreshCallback?.();
    });
  }, (error) => {
    console.error("连接失败，尝试重连", error);
    scheduleReconnect(type, notifyCallback, refreshCallback);
  });
}


export function disconnectWebSocket() {
  if (stompClient) {
    stompClient.disconnect();
  }
}

<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import { ElNotification } from "element-plus";
import { connectWebSocket, disconnectWebSocket } from "@/utils/websocket";


const showNotification = (message) => {
  ElNotification({
    title: "新订单提醒",
    type: "success",
    message: message,
  });
};


onMounted(() => {
  connectWebSocket("new-orders", showNotification, refreshOrderList);
});


onBeforeUnmount(() => {
  disconnectWebSocket();
});


function refreshOrderList() {
  console.log("刷新订单列表");
}
</script>

location /ws-notification {
  proxy_pass http://localhost:8083/ws-notification;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";
  proxy_set_header Host $host;
}

const socket = new SockJS(import.meta.env.VITE_WS_ENDPOINT || "http://localhost:8083/ws-notification");

@Component
public class AuthChannelInterceptor implements ChannelInterceptor {
    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message, StompHeaderAccessor.class);
        if (StompCommand.CONNECT.equals(accessor.getCommand())) {
            List<String> authHeaders = accessor.getNativeHeader("Authorization");
            String token = (authHeaders != null && !authHeaders.isEmpty()) ? authHeaders.get(0) : null;


            if (!TokenUtil.verify(token)) {
                throw new IllegalArgumentException("无效的 Token");
            }


            accessor.setUser(new UsernamePasswordAuthenticationToken("user", null, new ArrayList<>()));
        }
        return message;
    }
}

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

stompClient.connect({ Authorization: getToken() }, () => {
  stompClient.subscribe("/topic/new-orders", (msg) => {
    notifyCallback(msg.body);
  });
});