[譯] 實時通訊：使用 Spring Boot 實現 WebSocket

StackGC發表於2017-10-30
Spring BootWeb

keyholesoftware.com/2017/04/10/…

作者：THOMAS KENDALL

轉載自公眾號：stackgc

在開發 Web 應用時，我們有時需要將服務端事件推送到連線的客戶端。但 HTTP 並不能做到：客戶端開啟與服務端的連線並請求資料，反之服務端無法實現。

為了突破這個限制，我們可以建立一個輪詢模式，網頁間隔輪詢伺服器以獲取新事件。但這種模式不太理想，因為它增加了 HTTP 開銷，速度也受輪詢速率影響，並且給伺服器增加了不必要的負載。

幸運的是，HTML5 WebSocket 出現了。WebSocket 協議允許瀏覽器與 Web 伺服器之間進行低開銷的互動。在文中，我們將介紹 Websockets API，並講解如何使用 Spring Boot 實現 Websocket。

HTML5 來救場！

WebSocket 通過瀏覽器和伺服器之間的單連線提供全雙工通訊。它不存在 HTTP 開銷，並且允許伺服器將訊息實時推送到客戶端。

WebSocket API 實際上很簡單。你只需要建立一個 WebSocket 物件，附加事件監聽器和傳送訊息即可。

以下是一個例子：

var socket = new WebSocket('ws://' + window.location.host + '/my-websocket-endpoint');
 
// 連結開啟的監聽事件
socket.onopen = function() {
  console.log('WebSocket connection opened. Ready to send messages.');
 
  // 傳送一條訊息到服務端
  socket.send('Hello, from WebSocket client!');
};
 
// 接受到服務端訊息的監聽器
socket.onmessage = function(message) {
  console.log('Message received from server: ' + message);
};
複製程式碼

Spring Boot

Spring 為 WebSocket 介面提供了很好的支援。

首先，我們需要建立一個類，繼承 Spring 的 TextWebSocketHandler 類。

public class MyMessageHandler extends TextWebSocketHandler {
 
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        // WebSocket 被關閉後觸發
    }
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 新 WebSocket 建立連線觸發
        // 可以儲存 session 物件來傳送訊息
 
        // 傳送第一條訊息
        session.sendMessage(new TextMessage("You are now connected to the server. This is the first message."));
    }
 
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage textMessage) throws Exception {
        // 收到訊息觸發
        System.out.println("Message received: " + textMessage.getPayload());
    }
}
複製程式碼

接下來，我們需要配置 WebSocket 端點。

@Configuration
@EnableWebSocket
public class WebsocketConfig implements WebSocketConfigurer {
 
    @Bean
    public WebSocketHandler myMessageHandler() {
        return new MyMessageHandler();
    }
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myMessageHandler(), "/my-websocket-endpoint");
    }
 
}
複製程式碼

由於 WebSockets API 是純 JavaScript，你可以在大多數前端框架中使用它。包括 Angular，你可以在 TypeScript 中包含 JavaScript 程式碼。

總結

是不是相當簡單？它解決了服務端和客戶端之間傳輸資料的一大困擾。Spring Boot 使它變得更加簡單。

相關文章