Spring Boot系列十六 WebSocket簡介和spring boot整合簡單訊息代理

1. 概述

本文介紹webSocket相關的內容，主要有如下內容：

• WebSocket的誕生的背景、執行機制和抓包分析
• WebSocket 的應用場景、服務端和瀏覽器的版本要求
• Spring 內嵌的簡單訊息代理 和 訊息流程圖
• 在Spring boot中整合websocket，並介紹stomp、sockjs的用法
• 介紹攔截器HandshakeInterceptor和ChannelInterceptor，並演示攔截器的用法
• @SendTo和@SendToUser用法和區別

2. WebSocket的誕生的背景、執行機制和抓包分析

2.1. Websocket誕生的背景

對於需要實時響應、高併發的應用，傳統的請求-響應模式的 Web的效率不是很好。在處理此類業務場景時，通常採用的方案有:

• 輪詢,此方法容易浪費頻寬，效率低下
• 基於 Flash，AdobeFlash 通過自己的 Socket 實現完成資料交換，再利用 Flash 暴露出相應的介面為 JavaScript 呼叫，從而達到實時傳輸目的。但是現在flash沒落了，此方法不好用
• MQTT，Comet 開源框架，這些技術在大流量的情況，效果不是很好

在此背景下， HTML5規範中的(有 Web TCP 之稱的) WebSocket ，就是一種高效節能的雙向通訊機制來保證資料的實時傳輸。

2.2. WebSocket 執行機制

WebSocket 是 HTML5 一種新的協議。它建立在 TCP 之上，實現了客戶端和服務端全雙工非同步通訊.

它和 HTTP 最大不同是：

• WebSocket 是一種雙向通訊協議，WebSocket 伺服器和 Browser/Client Agent 都能主動的向對方傳送或接收資料；
• WebSocket 需要類似 TCP 的客戶端和伺服器端通過握手連線，連線成功後才能相互通訊。

傳統 HTTP 請求響應客戶端伺服器互動圖

WebSocket 請求響應客戶端伺服器互動圖

對比上面兩圖，相對於傳統 HTTP 每次請求-應答都需要客戶端與服務端建立連線的模式，WebSocket 一旦 WebSocket 連線建立後，後續資料都以幀序列的形式傳輸。在客戶端斷開 WebSocket 連線或 Server 端斷掉連線前，不需要客戶端和服務端重新發起連線請求，這樣保證websocket的效能優勢，實時性優勢明顯

2.3. WebSocket抓包分析

我們再通過客戶端和服務端互動的報文看一下 WebSocket 通訊與傳統 HTTP 的不同：

WebSocket 客戶連線服務端埠，執行雙方握手過程，客戶端傳送資料格式類似：
請求 ：

• “Upgrade：websocket”引數值表明這是 WebSocket 型別請求
• “Sec-WebSocket-Key”是 WebSocket 客戶端傳送的一個 base64
  編碼的密文，要求服務端必須返回一個對應加密的“Sec-WebSocket-Accept”應答，否則客戶端會丟擲“Error during WebSocket handshake”錯誤，並關閉連線。

服務端收到報文後返回的資料格式類似：

• “Sec-WebSocket-Accept”的值是服務端採用與客戶端一致的金鑰計算出來後返回客戶端的
• “HTTP/1.1 101″ : Switching Protocols”表示服務端接受 WebSocket 協議的客戶端連線，經過這樣的請求-響應處理後，客戶端服務端的 WebSocket 連線握手成功, 後續就可以進行 TCP 通訊了

3. WebSocket 的應用場景、服務端和瀏覽器的版本要求

3.1. 使用websocket的場景

客戶端和伺服器需要以高頻率和低延遲交換事件。 對時間延遲都非常敏感，並且還需要以高頻率交換各種各樣的訊息

3.2. 服務端和瀏覽器的版本要求

WebSocket 服務端在各個主流應用伺服器廠商中已基本獲得符合 JEE JSR356 標準規範 API 的支援。當前支援websocket的版本:Tomcat 7.0.47+, Jetty 9.1+, GlassFish 4.1+, WebLogic 12.1.3+, and Undertow 1.0+ (and WildFly 8.0+).

瀏覽器的支援版本：
檢視所有支援websocket瀏覽器的連線：

4. Spring 內嵌的簡單訊息代理 和 訊息流程圖

4.1. Simple Broker

Spring 內建簡單訊息代理。這個代理處理來自客戶端的訂閱請求，將它們儲存在記憶體中，並將訊息廣播到具有匹配目標的連線客戶端

4.2. 訊息流程圖

下圖是使用簡單訊息代理的流程圖

上圖3個訊息通道說明如下：

• “clientInboundChannel” — 用於傳輸從webSocket客戶端接收的訊息
• “clientOutboundChannel” — 用於傳輸向webSocket客戶端傳送的訊息
• “brokerChannel” — 用於傳輸從伺服器端應用程式程式碼向訊息代理髮送訊息

5. 在Spring boot中整合websocket，並介紹stomp、sockjs的用法

5.1. pom.xml

<!-- 引入 websocket 依賴類-->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
複製程式碼

5.2. POJO類

RequestMessage： 瀏覽器向服務端請求的訊息

public class RequestMessage {
    private String name;

// set/get略
}
複製程式碼

ResponseMessage: 服務端返回給瀏覽器的訊息

public class ResponseMessage {
    private String responseMessage;

// set/get略
}
複製程式碼

5.3. BroadcastCtl

此類是@Controller類

• broadcastIndex()方法：使用 @RequestMapping轉到的頁面
• broadcast()方法上的註解說明
  • @MessageMapping：指定要接收訊息的地址，類似@RequestMapping
  • @SendTo預設訊息將被髮送到與傳入訊息相同的目的地，但是目的地前面附加字首（預設情況下為“/topic”}

@Controller
public class BroadcastCtl {
    private static final Logger logger = LoggerFactory.getLogger(BroadcastCtl.class);

    // 收到訊息記數
    private AtomicInteger count = new AtomicInteger(0);
    
    /**
     * @MessageMapping 指定要接收訊息的地址，類似@RequestMapping。除了註解到方法上，也可以註解到類上
     * @SendTo預設 訊息將被髮送到與傳入訊息相同的目的地
     * 訊息的返回值是通過{@link org.springframework.messaging.converter.MessageConverter}進行轉換
     * @param requestMessage
     * @return
     */
    @MessageMapping("/receive")
    @SendTo("/topic/getResponse")
    public ResponseMessage broadcast(RequestMessage requestMessage){
        logger.info("receive message = {}" , JSONObject.toJSONString(requestMessage));
        ResponseMessage responseMessage = new ResponseMessage();
        responseMessage.setResponseMessage("BroadcastCtl receive [" + count.incrementAndGet() + "] records");
        return responseMessage;
    }

    @RequestMapping(value="/broadcast/index")
    public String broadcastIndex(HttpServletRequest req){
        System.out.println(req.getRemoteHost());
        return "websocket/simple/ws-broadcast";
    }

}

複製程式碼

5.4. WebSocketMessageBrokerConfigurer

配置訊息代理，預設情況下使用內建的訊息代理。
類上的註解@EnableWebSocketMessageBroker：此註解表示使用STOMP協議來傳輸基於訊息代理的訊息，此時可以在@Controller類中使用@MessageMapping

• 在方法registerStompEndpoints()裡addEndpoint方法：新增STOMP協議的端點。這個HTTP URL是供WebSocket或SockJS客戶端訪問的地址;withSockJS：指定端點使用SockJS協議
• 在方法configureMessageBroker()裡設定簡單訊息代理，並配置訊息的傳送的地址符合配置的字首的訊息才傳送到這個broker

@Configuration
// 此註解表示使用STOMP協議來傳輸基於訊息代理的訊息，此時可以在@Controller類中使用@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /**
         * 註冊 Stomp的端點
         * addEndpoint：新增STOMP協議的端點。這個HTTP URL是供WebSocket或SockJS客戶端訪問的地址
         * withSockJS：指定端點使用SockJS協議
          */
        registry.addEndpoint("/websocket-simple")
                .setAllowedOrigins("*") // 新增允許跨域訪問
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        /**
         * 配置訊息代理
         * 啟動簡單Broker，訊息的傳送的地址符合配置的字首來的訊息才傳送到這個broker
         */
        registry.enableSimpleBroker("/topic","/queue");
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        super.configureClientInboundChannel(registration);
    }
}

複製程式碼

5.5. 前端stomp、sockjs的配置

Stomp
websocket使用socket實現雙工非同步通訊能力。但是如果直接使用websocket協議開發程式比較繁瑣，我們可以使用它的子協議Stomp

SockJS
sockjs是websocket協議的實現，增加了對瀏覽器不支援websocket的時候的相容支援
SockJS的支援的傳輸的協議有3類: WebSocket, HTTP Streaming, and HTTP Long Polling。預設使用websocket，如果瀏覽器不支援websocket，則使用後兩種的方式。
SockJS使用”Get /info”從服務端獲取基本資訊。然後客戶端會決定使用哪種傳輸方式。如果瀏覽器使用websocket，則使用websocket。如果不能，則使用Http Streaming，如果還不行，則最後使用 HTTP Long Polling

ws-broadcast.jsp
前端頁面

引入相關的stomp.js、sockjs.js、jquery.js

<!-- jquery  -->
<script src="/websocket/jquery.js"></script>
<!-- stomp協議的客戶端指令碼 -->
<script src="/websocket/stomp.js"></script>
<!-- SockJS的客戶端指令碼 -->
<script src="/websocket/sockjs.js"></script>
複製程式碼

前端訪問websocket，重要程式碼說明如下：

• var socket = new SockJS(`/websocket-simple`)：websocket的連線地址，此值等於WebSocketMessageBrokerConfigurer中registry.addEndpoint(“/websocket-simple”).withSockJS()配置的地址
• stompClient.subscribe(`/topic/getResponse`, function(respnose){ … }): 客戶端訂閱訊息的目的地址：此值和BroadcastCtl中的@SendTo(“/topic/getResponse”)註解的配置的值相同
• stompClient.send(“/receive”, {}, JSON.stringify({ `name`: name })): 客戶端訊息傳送的目的地址：服務端使用BroadcastCtl中@MessageMapping(“/receive”)註解的方法來處理髮送過來的訊息

<body onload="disconnect()">
<div>
    <div>
        <button id="connect" onclick="connect();">連線</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連線</button>
    </div>
    <div id="conversationDiv">
        <label>輸入你的名字</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">傳送</button>
        <p id="response"></p>
    </div>
</div>

<script type="text/javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById(`connect`).disabled = connected;
        document.getElementById(`disconnect`).disabled = !connected;
        document.getElementById(`conversationDiv`).style.visibility = connected ? `visible` : `hidden`;
        $(`#response`).html();
    }

    function connect() {
        // websocket的連線地址，此值等於WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple").withSockJS()配置的地址
        var socket = new SockJS(`/websocket-simple`); 
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log(`Connected: ` + frame);
            // 客戶端訂閱訊息的目的地址：此值BroadcastCtl中被@SendTo("/topic/getResponse")註解的裡配置的值
            stompClient.subscribe(`/topic/getResponse`, function(respnose){ 
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }


    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $(`#name`).val();
        // 客戶端訊息傳送的目的：服務端使用BroadcastCtl中@MessageMapping("/receive")註解的方法來處理髮送過來的訊息
        stompClient.send("/receive", {}, JSON.stringify({ `name`: name }));
    }

    function showResponse(message) {
        var response = $("#response");
        response.html(message + "
" + response.html());
    }
</script>
</body>

複製程式碼

5.6. 測試

啟動服務WebSocketApplication
在開啟多個標籤，執行請求： http://127.0.0.1:8080//broadcast/index
點選”連線”，然後”傳送”多次，結果如下：
可知websocket執行成功，並且將所有的返回值傳送給所有的訂閱者

6. 介紹攔截器HandshakeInterceptor和ChannelInterceptor，並演示攔截器的用法

我們可以為websocket配置攔截器，預設有兩種：

• HandshakeInterceptor：攔截websocket的握手請求。在服務端和客戶端在進行握手時會被執行
• ChannelInterceptor：攔截Message。可以在Message對被在傳送到MessageChannel前後檢視修改此值，也可以在MessageChannel接收MessageChannel物件前後修改此值

6.1. HandShkeInceptor

攔截websocket的握手請求。實現 介面 HandshakeInterceptor或繼承類DefaultHandshakeHandler

HttpSessionHandshakeInterceptor：關於httpSession的操作，這個攔截器用來管理握手和握手後的事情，我們可以通過請求資訊，比如token、或者session判使用者是否可以連線，這樣就能夠防範非法使用者
OriginHandshakeInterceptor：檢查Origin頭欄位的合法性

自定義HandshakeInterceptor ：

@Component
public class MyHandShakeInterceptor implements HandshakeInterceptor {
    @Override
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
        System.out.println(this.getClass().getCanonicalName() + "http協議轉換websoket協議進行前, 握手前"+request.getURI());
        // http協議轉換websoket協議進行前，可以在這裡通過session資訊判斷使用者登入是否合法
        return true;
    }

    @Override
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
        //握手成功後,
        System.out.println(this.getClass().getCanonicalName() + "握手成功後...");
    }
}

複製程式碼

6.2. ChannelInterceptor

ChannelInterceptor：可以在Message物件在傳送到MessageChannel前後檢視修改此值，也可以在MessageChannel接收MessageChannel物件前後修改此值

在此攔截器中使用StompHeaderAccessor 或 SimpMessageHeaderAccessor訪問訊息

自定義ChannelInterceptorAdapter

@Component
public class MyChannelInterceptorAdapter extends ChannelInterceptorAdapter {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @Override
    public boolean preReceive(MessageChannel channel) {
        System.out.println(this.getClass().getCanonicalName() + " preReceive");
        return super.preReceive(channel);
    }

    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        System.out.println(this.getClass().getCanonicalName() + " preSend");
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        StompCommand command = accessor.getCommand();
        //檢測使用者訂閱內容（防止使用者訂閱不合法頻道）
        if (StompCommand.SUBSCRIBE.equals(command)) {
            System.out.println(this.getClass().getCanonicalName() + " 使用者訂閱目的地=" + accessor.getDestination());
            // 如果該使用者訂閱的頻道不合法直接返回null前端使用者就接受不到該頻道資訊
            return super.preSend(message, channel);
        } else {
            return super.preSend(message, channel);
        }

    }
    @Override
    public void afterSendCompletion(Message<?> message, MessageChannel channel, boolean sent, Exception ex) {
        System.out.println(this.getClass().getCanonicalName() +" afterSendCompletion");
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        StompCommand command = accessor.getCommand();
        if (StompCommand.SUBSCRIBE.equals(command)){
            System.out.println(this.getClass().getCanonicalName() + " 訂閱訊息傳送成功");
            this.simpMessagingTemplate.convertAndSend("/topic/getResponse","訊息傳送成功");
        }
        //如果使用者斷開連線
        if (StompCommand.DISCONNECT.equals(command)){
            System.out.println(this.getClass().getCanonicalName() + "使用者斷開連線成功");
                simpMessagingTemplate.convertAndSend("/topic/getResponse","{`msg`:`使用者斷開連線成功`}");
        }

        super.afterSendCompletion(message, channel, sent, ex);
    }
}
複製程式碼

6.3. 在WebSocketMessageBrokerConfigurer中配置攔截器

• 在registerStompEndpoints()方法中通過registry.addInterceptors(myHandShakeInterceptor)新增自定義HandShkeInceptor 攔截
• 在configureClientInboundChannel()方法中registration.setInterceptors(myChannelInterceptorAdapter)新增ChannelInterceptor攔截器

@Configuration
// 此註解表示使用STOMP協議來傳輸基於訊息代理的訊息，此時可以在@Controller類中使用@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {

    @Autowired
    private MyHandShakeInterceptor myHandShakeInterceptor;

    @Autowired
    private MyChannelInterceptorAdapter myChannelInterceptorAdapter;

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /**
         * 註冊 Stomp的端點
         *
         * addEndpoint：新增STOMP協議的端點。這個HTTP URL是供WebSocket或SockJS客戶端訪問的地址
         * withSockJS：指定端點使用SockJS協議
          */
        registry.addEndpoint("/websocket-simple")
                .setAllowedOrigins("*") // 新增允許跨域訪問
	      //. setAllowedOrigins("http://mydomain.com");
                .addInterceptors(myHandShakeInterceptor) // 新增自定義攔截
                .withSockJS();
    }

    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        ChannelRegistration channelRegistration = registration.setInterceptors(myChannelInterceptorAdapter);
        super.configureClientInboundChannel(registration);
    }
}

複製程式碼

6.4. 測試：

和上個例子相同的方式進行測試，這裡略

7. @SendTo和@SendToUser用法和區別

上文@SendTo會將訊息推送到所有訂閱此訊息的連線，即訂閱/釋出模式。@SendToUser只將訊息推送到特定的一個訂閱者，即點對點模式

@SendTo：會將接收到的訊息傳送到指定的路由目的地，所有訂閱該訊息的使用者都能收到，屬於廣播。
@SendToUser：訊息目的地有UserDestinationMessageHandler來處理，會將訊息路由到傳送者對應的目的地, 此外該註解還有個broadcast屬性，表明是否廣播。就是當有同一個使用者登入多個session時，是否都能收到。取值true/false.

7.1. BroadcastSingleCtl

此類上面的BroadcastCtl 大部分相似，下面只列出不同的地方
broadcast()方法：這裡使用 @SendToUser註解

@Controller
public class BroadcastSingleCtl {
    private static final Logger logger = LoggerFactory.getLogger(BroadcastSingleCtl.class);

    // 收到訊息記數
    private AtomicInteger count = new AtomicInteger(0);

    // @MessageMapping 指定要接收訊息的地址，類似@RequestMapping。除了註解到方法上，也可以註解到類上
    @MessageMapping("/receive-single")
    /**
     * 也可以使用SendToUser，可以將將訊息定向到特定使用者
     * 這裡使用 @SendToUser，而不是使用 @SendTo
     */
    @SendToUser("/topic/getResponse")
    public ResponseMessage broadcast(RequestMessage requestMessage){
        ….
    }


    @RequestMapping(value="/broadcast-single/index")
    public String broadcastIndex(){
        return "websocket/simple/ws-broadcast-single";
    }

複製程式碼

7.2. 在WebSocketMessageBrokerConfigurer中配置

@Configuration
@MessageMapping
@EnableWebSocketMessageBroker
public class WebSocketMessageBrokerConfigurer extends AbstractWebSocketMessageBrokerConfigurer {
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        ….
        registry.addEndpoint("/websocket-simple-single").withSockJS();
    }
    ….
}
複製程式碼

7.3. ws-broadcast-single.jsp頁面

ws-broadcast-single.jsp頁面：和ws-broadcast.jsp相似，這裡只列出不同的地方
最大的不同是 stompClient.subscribe的訂閱的目的地的字首是/user，後面再上@SendToUser(“/topic/getResponse”)註解的裡配置的值

<script type="text/javascript">
    var stompClient = null;
 …

    function connect() {
        // websocket的連線地址，此值等於WebSocketMessageBrokerConfigurer中registry.addEndpoint("/websocket-simple-single").withSockJS()配置的地址
        var socket = new SockJS(`/websocket-simple-single`); //1
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log(`Connected: ` + frame);
            // 客戶端訂閱訊息的目的地址：此值等於BroadcastCtl中@SendToUser("/topic/getResponse")註解的裡配置的值。這是請求的地址必須使用/user字首
            stompClient.subscribe(`/user/topic/getResponse`, function(respnose){ //2
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
        });
    }


    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var name = $(`#name`).val();
        //// 客戶端訊息傳送的目的：服務端使用BroadcastCtl中@MessageMapping("/receive-single")註解的方法來處理髮送過來的訊息
        stompClient.send("/receive-single", {}, JSON.stringify({ `name`: name }));
    }
…
</script>

複製程式碼

7.4. 測試

啟動服務WebSocketApplication
執行請求： http://127.0.0.1:8080//broadcast-single/index
點選”連線”，在兩個頁面各傳送兩次訊息，結果如下：
可知websocket執行成功，並且所有的返回值只返回傳送者，而不是所有的訂閱者

8. 程式碼

所有的詳細程式碼見github程式碼，請儘量使用tag v0.19，不要使用master，因為master一直在變，不能保證文章中程式碼和github上的程式碼一直相同