Spring Boot系列十六 WebSocket簡介和spring boot集成簡單消息代理

時間 2019-11-08

標籤 spring boot 系列十六 websocket 簡介集成簡單消息代理欄目 Spring 简体版

原文原文鏈接

1. 概述

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

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

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

2.1. Websocket誕生的背景

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

輪詢,此方法容易浪費帶寬，效率低下
基於 Flash，AdobeFlash 經過本身的 Socket 實現完成數據交換，再利用 Flash 暴露出相應的接口爲 JavaScript 調用，從而達到實時傳輸目的。可是如今flash沒落了，此方法很差用
MQTT，Comet 開源框架，這些技術在大流量的狀況，效果不是很好

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

2.2. WebSocket 運行機制

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

它和 HTTP 最大不一樣是：jquery

WebSocket 是一種雙向通訊協議，WebSocket 服務器和 Browser/Client Agent 都能主動的向對方發送或接收數據；
WebSocket 須要相似 TCP 的客戶端和服務器端經過握手鍊接，鏈接成功後才能相互通訊。

傳統 HTTP 請求響應客戶端服務器交互圖git

WebSocket 請求響應客戶端服務器交互圖github

對比上面兩圖，相對於傳統 HTTP 每次請求-應答都須要客戶端與服務端創建鏈接的模式，WebSocket 一旦 WebSocket 鏈接創建後，後續數據都以幀序列的形式傳輸。在客戶端斷開 WebSocket 鏈接或 Server 端斷掉鏈接前，不須要客戶端和服務端從新發起鏈接請求，這樣保證websocket的性能優點，實時性優點明顯web

2.3. WebSocket抓包分析

咱們再經過客戶端和服務端交互的報文看一下 WebSocket 通信與傳統 HTTP 的不一樣：spring

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 + "\r\n" + 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>

複製代碼