WebSocket 是實時通信的理想選擇，因其支持雙向持久連接，減少 HTTP 請求開銷。1. WebSocket 允許服務(wù)器主動推送消息，提高效率；2. 前端通過 WebSocket API 簡單接入并監(jiān)聽消息；3. Java 后端如 Spring Boot 可結(jié)合 STOMP 和 ActiveMQ 實現(xiàn) WebSocket 與消息隊列整合；4. 使用 @ServerEndpoint 創(chuàng)建端點并通過 messagingTemplate 發(fā)送消息到隊列；5. 前端使用 SockJS 和 STOMP.js 訂閱主題接收廣播消息；6. 注意部署時配置 WebSocket 支持、跨域處理、統(tǒng)一 JSON 格式及重連機制。

實時 JavaScript 應(yīng)用在現(xiàn)代 Web 開發(fā)中越來越常見，比如聊天應(yīng)用、在線協(xié)作工具、實時通知系統(tǒng)等。要實現(xiàn)這類功能，WebSocket 是一個非常合適的通信協(xié)議，而如果你的后端是基于 Java 的，并且使用了消息隊列（如 ActiveMQ 或 RabbitMQ），那整合 WebSocket 和 Java 消息隊列就是關(guān)鍵所在。

下面我們就來看看如何實現(xiàn)這個整合。

WebSocket 是什么，為什么適合實時通信？

WebSocket 是一種在客戶端和服務(wù)器之間建立持久連接的協(xié)議，允許雙方隨時發(fā)送數(shù)據(jù)，而不是傳統(tǒng)的請求-響應(yīng)模式。這對實時性要求高的應(yīng)用非常合適。

相比輪詢（polling）或長輪詢（long-polling），WebSocket 減少了大量不必要的 HTTP 請求，通信效率更高。比如在聊天應(yīng)用中，用戶發(fā)送消息后，服務(wù)器可以立即通過 WebSocket 把消息推送給其他用戶，而不需要客戶端不斷去“問”有沒有新消息。

前端方面，瀏覽器原生支持 WebSocket API，使用起來非常簡單：

const socket = new WebSocket('ws://yourserver.com/socket');

socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};

Java 后端如何整合 WebSocket 與消息隊列？

如果你的后端是 Java，比如使用 Spring Boot，可以通過 @ServerEndpoint 注解創(chuàng)建 WebSocket 端點。但如果你還想把 WebSocket 收到的消息轉(zhuǎn)發(fā)給消息隊列，就需要做進一步整合。

常見的做法是讓 WebSocket 端點接收到消息后，把消息發(fā)布到消息隊列中。這樣做的好處是解耦 WebSocket 層和業(yè)務(wù)邏輯層，還能利用消息隊列的可靠性、持久化、廣播等能力。

以 Spring Boot STOMP ActiveMQ 為例：

1. 啟用 WebSocket 支持：

   @Configuration
   @EnableWebSocketMessageBroker
   public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
       @Override
       public void registerStompEndpoints(StompEndpointRegistry registry) {
           registry.addEndpoint("/ws").withSockJS();
       }
   
       @Override
       public void configureMessageBroker(MessageBrokerRegistry registry) {
           registry.enableSimpleBroker("/topic");
           registry.setApplicationDestinationPrefixes("/app");
       }
   }

2. 接收客戶端消息并轉(zhuǎn)發(fā)到消息隊列：

   @Component
   public class MessageBroker {
       private final SimpMessagingTemplate messagingTemplate;
   
       public MessageBroker(SimpMessagingTemplate messagingTemplate) {
           this.messagingTemplate = messagingTemplate;
       }
   
       public void sendMessageToQueue(String destination, String message) {
           messagingTemplate.convertAndSend(destination, message);
       }
   }

3. WebSocket 控制器接收消息并調(diào)用消息隊列：

   @Controller
   public class WebSocketController {
       private final MessageBroker messageBroker;
   
       public WebSocketController(MessageBroker messageBroker) {
           this.messageBroker = messageBroker;
       }
   
       @MessageMapping("/chat")
       public void sendChatMessage(String message) {
           messageBroker.sendMessageToQueue("/topic/messages", message);
       }
   }

這樣，前端通過 WebSocket 發(fā)送的消息就會被后端處理，并廣播給所有訂閱 /topic/messages 的客戶端。

前后端如何配合實現(xiàn)消息廣播？

前后端配合的關(guān)鍵在于消息的訂閱和廣播機制。

前端使用 SockJS STOMP.js 可以方便地訂閱特定主題：

const socket = new SockJS('/ws');
const stompClient = Stomp.over(socket);

stompClient.connect({}, function () {
  stompClient.subscribe('/topic/messages', function (message) {
    console.log('收到廣播消息：', message.body);
  });

  stompClient.send("/app/chat", {}, JSON.stringify({ 'message': '你好！' }));
});

后端在接收到 /app/chat 的消息后，通過 convertAndSend() 方法把消息廣播給所有訂閱 /topic/messages 的客戶端。

這種模式非常適合聊天室、通知系統(tǒng)等需要廣播消息的場景。

需要注意的幾個細節(jié)

• WebSocket 和 HTTP 是不同的協(xié)議，部署時要注意服務(wù)器是否支持 WebSocket 協(xié)議（如 Nginx 需要配置升級頭）。
• 跨域問題：前端連接 WebSocket 時可能會遇到跨域問題，Spring 提供了 setAllowedOrigin("*") 等方法來配置。
• 消息格式：建議統(tǒng)一使用 JSON 格式傳遞數(shù)據(jù)，方便前后端解析。
• 連接保持和重連機制：前端可以監(jiān)聽 WebSocket 的 onclose 事件，自動嘗試重新連接。

整合 WebSocket 和 Java 消息隊列并不復(fù)雜，但需要注意前后端的協(xié)調(diào)和消息流轉(zhuǎn)機制。只要設(shè)計好消息的路由和廣播邏輯，就可以實現(xiàn)穩(wěn)定、高效的實時通信系統(tǒng)。

基本上就這些。

以上是帶有Websocket的實時JavaScript應(yīng)用程序，并與Java消息隊列集成的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！