實戰突破！Vue3 + SpringBoot 打造高效 Web 實時消息推送系統

作者：編程疏影 2025-06-26 04:10:00

開發前端

在傳統的 HTTP 通信模型中，客戶端想要獲取最新數據，必須不斷地向服務器發送請求進行詢問——這種方式稱為輪詢。

為何需要 Web 實時通信？

在傳統的 HTTP 通信模型中，客戶端想要獲取最新數據，必須不斷地向服務器發送請求進行詢問——這種方式稱為輪詢。

假設你正在訪問一個股票信息平臺，瀏覽器每隔數秒就向服務器發送請求，服務器回復：“暫時沒變化”，直到股價真正變化為止。這不僅浪費帶寬，也帶來了數據更新的延遲。

而 WebSocket 則從根本上改變了這個機制。它在客戶端與服務器之間建立一條持久連接，允許服務端主動將新消息推送給客戶端。這就像雙方之間開了一個微信語音通話頻道，消息來回即時互通，無需每次“掛斷再撥號”。

典型應用場景：

實時聊天（如微信、釘釘）
股票/幣價推送
實時協作文檔編輯
在線訂單通知/預警系統

系統構建：技術選型與項目結構

為了實現一個具有實時消息推送能力的 Web 應用，我們采用如下架構：

服務端（Spring Boot）：負責業務邏輯處理、WebSocket 消息分發和管理連接會話。
客戶端（Vue3）：負責 UI 展示和 WebSocket 的消息接收/顯示。

Spring Boot 服務端實現

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 前端實現

安裝依賴

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>

部署上線實戰

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 打包和環境變量

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

總結：面向產品級的實時推送體系

通過本項目的實戰與優化，我們打造了一個功能完整的實時消息推送系統，它具備如下特性：

前后端解耦，通信基于 WebSocket + STOMP
消息反應秒級可達
支持鑒權，可與登陸系統完編合
具備斷線重連能力
可實際部署，用 Nginx 做網關分發

責任編輯：武曉燕來源：路條編程

Vue3 消息推送系統