Vue3結合SpringBoot打造一個高效Web實時消息推送系統(tǒng)

更新時間：2025年07月01日 10:58:58 作者：星辰聊技術

這篇文章主要為大家詳細介紹了Vue3如何結合SpringBoot打造一個高效Web實時消息推送系統(tǒng),文中的示例代碼講解詳細,感興趣的小伙伴可以了解下

Spring Boot 服務端實現(xiàn)

Maven 依賴

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

WebSocket 配置

@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);
    }
}

Vue3 前端實現(xiàn)

安裝依賴

npm install sockjs-client stompjs

/utils/websocket.js

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();
  }
}

Vue 組件使用

<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>

部署上線實戰(zhàn)

Nginx 配置 WebSocket 中繼

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;
}

Vue 打包和環(huán)境變量

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

WebSocket 鑒權機制

服務端 STOMP 攔截器

@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;
    }
}

在 WebSocket 配置中注冊

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

客戶端使用 Token

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