spring boot整合websocket

一.WebSocket簡單介紹

　　隨着互聯網的發展，傳統的HTTP協議已經很難滿足Web應用日益復雜的需求了。近年來，隨着HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與服務器的全雙工通信，擴展了瀏覽器與服務端的通信功能，使服務端也能主動向客戶端發送數據。

　　我們知道，傳統的HTTP協議是無狀態的，每次請求（request）都要由客戶端（如 瀏覽器）主動發起，服務端進行處理后返回response結果，而服務端很難主動向客戶端發送數據；這種客戶端是主動方，服務端是被動方的傳統Web模式 對於信息變化不頻繁的Web應用來說造成的麻煩較小，而對於涉及實時信息的Web應用卻帶來了很大的不便，如帶有即時通信、實時數據、訂閱推送等功能的應 用。在WebSocket規范提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢（polling）和Comet技術。其實后者本質上也是一種輪詢，只不過有所改進。

　　輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔周期性地向服務端發送請求，頻繁地查詢是否有新的數據改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和服務器資源。

　　Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些數據設定過期時間，當數據過期后才會向服務端發送請求；這種機制適合數據的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的窗口與服務端建立一個HTTP長連接，服務端會不斷更新連接狀態以保持HTTP長連接存活；這樣的話，服務端就可以通過這條長連接主動將數據發送給客戶端；流技術在大並發環境下，可能會考驗到服務端的性能。

　　這兩種技術都是基於請求-應答模式，都不算是真正意義上的實時技術；它們的每一次請求、應答，都浪費了一定流量在相同的頭部信息上，並且開發復雜度也較大。

　　伴隨着HTML5推出的WebSocket，真正實現了Web的實時通信，使B/S模式具備了C/S模式的實時通信能力。WebSocket的工作流程是這 樣的：瀏覽器通過JavaScript向服務端發出建立WebSocket連接的請求，在WebSocket連接建立成功后，客戶端和服務端就可以通過 TCP連接傳輸數據。因為WebSocket連接本質上是TCP連接，不需要每次傳輸都帶上重復的頭部數據，所以它的數據傳輸量比輪詢和Comet技術小 了很多。本文不詳細地介紹WebSocket規范，主要介紹下WebSocket在Java Web中的實現。

　　JavaEE 7中出了JSR-356:Java API for WebSocket規范。不少Web容器，如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat從7.0.27開始支持 WebSocket，從7.0.47開始支持JSR-356，下面的Demo代碼也是需要部署在Tomcat7.0.47以上的版本才能運行。

二.WebSocket優點

以前我們實現推送技術，用的都是輪詢，在特點的時間間隔有瀏覽器自動發出請求，將服務器的消息主動的拉回來，在這種情況下，我們需要不斷的向服務器發送請求，然而HTTP request 的header是非常長的，里面包含的數據可能只是一個很小的值，這樣會占用很多的帶寬和服務器資源。會占用大量的帶寬和服務器資源。

WebSocket API最偉大之處在於服務器和客戶端可以在給定的時間范圍內的任意時刻，相互推送信息。在建立連接之后，服務器可以主動傳送數據給客戶端。

此外，服務器與客戶端之間交換的標頭信息很小。

WebSocket並不限於以Ajax(或XHR)方式通信，因為Ajax技術需要客戶端發起請求，而WebSocket服務器和客戶端可以彼此相互推送信息；

三.springBoot整合webSocket用例

1.引入websocket依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

完整的pom.xml文件代碼如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>spring-boot-16</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>spring-boot-16</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.3.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

2.1 @EnableWebSocketMessageBroker注解表示開啟使用STOMP協議來傳輸基於代理的消息，Broker就是代理的意思。
2.2 registerStompEndpoints方法表示注冊STOMP協議的節點，並指定映射的URL。
2.3 stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();這一行代碼用來注冊STOMP協議節點，同時指定使用SockJS協議。
2.4 configureMessageBroker方法用來配置消息代理，由於我們是實現推送功能，這里的消息代理是/topic

總之，首先注冊了一個名為/my-websocket的端點，也就是STOMP客戶端連接的地址。

此外，定義了服務端處理WebSocket消息的前綴是/app，這個地址用於客戶端向服務端發送消息（比如客戶端向/app/send這個地址發送消息，那么服務端通過@MessageMapping(“/send”)這個注解來接收並處理消息）

最后，定義了一個簡單消息代理，也就是服務端廣播消息的路徑前綴（比如客戶端監聽/topic/send這個地址，那么服務端就可以通過@SendTo(“/topic/send”)這個注解向客戶端發送STOMP消息）。

 

package com.example;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/my-websocket").withSockJS();
    }
}

3.編寫一個DTO類來承載消息：

package com.example;

public class SocketMessage {

    public String message;

    public String date;

}

4.創建App.java類，用於啟用spring boot和用於接收、發送消息的控制器。

“send”方法用於接收客戶端發送過來的websocket請求。

@EnableScheduling注解為：啟用spring boot的定時任務，這與“callback”方法相呼應，用於每隔1秒推送服務器端的時間。

@MessageMapping注解和我們之前使用的@RequestMapping類似。@SendTo注解表示當服務器有消息需要推送的時候，會對訂閱了@SendTo中路徑的瀏覽器發送消息。

convertAndSend方法是向前端發送一條消息，第一個參數是瀏覽器中訂閱消息的地址，第二個參數是消息本身。

package com.example;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
@EnableScheduling
@SpringBootApplication
public class App {

    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @GetMapping("/")
    public String index() {
        return "index";
    }

    @MessageMapping("/send")
    @SendTo("/topic/send")
    public SocketMessage send(SocketMessage message) throws Exception {
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        message.date = df.format(new Date());
        return message;
    }

    @Scheduled(fixedRate = 1000)
    @SendTo("/topic/callback")
    public Object callback() throws Exception {
        // 發現消息
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messagingTemplate.convertAndSend("/topic/callback", df.format(new Date()));
        return "callback";
    }
}

5.在“resources/templates”目錄下創建index.html文件,引用angular.js的CDN文件外，還需要引用sockjs和stomp

<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/

    var stompClient = null;

    var app = angular.module('app', []);
    app.controller('MainController', function($rootScope, $scope, $http) {

        $scope.data = {
            //連接狀態
            connected : false,
            //消息
            message : '',
            rows : []
        };

        //連接
        $scope.connect = function() {
            var socket = new SockJS('/my-websocket');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                // 注冊發送消息
                stompClient.subscribe('/topic/send', function(msg) {
                    $scope.data.rows.push(JSON.parse(msg.body));
                    $scope.data.connected = true;
                    $scope.$apply();
                });
                // 注冊推送時間回調
                stompClient.subscribe('/topic/callback', function(r) {
                    $scope.data.time = '當前服務器時間：' + r.body;
                    $scope.data.connected = true;
                    $scope.$apply();
                });

                $scope.data.connected = true;
                $scope.$apply();
            });
        };

        $scope.disconnect = function() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            $scope.data.connected = false;
        }

        $scope.send = function() {
            stompClient.send("/app/send", {}, JSON.stringify({
                'message' : $scope.data.message
            }));
        }
    });
    /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
    <label>WebSocket連接狀態:</label>
    <button type="button" ng-disabled="data.connected" ng-click="connect()">連接</button>
    <button type="button" ng-click="disconnect()"
        ng-disabled="!data.connected">斷開</button>
    <br />
    <br />
    <div ng-show="data.connected">
        <label>{{data.time}}</label> <br /> <br /> <input type="text"
            ng-model="data.message" placeholder="請輸入內容..." />
        <button ng-click="send()" type="button">發送</button>
        <br /> <br /> 消息列表： <br />
        <table>
            <thead>
                <tr>
                    <th>內容</th>
                    <th>時間</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in data.rows">
                    <td>{{row.message}}</td>
                    <td>{{row.date}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

總結

在開發一個基於web的即時通訊應用的過程中，我們還需考慮session的機制。

還需要一個集合來承載當前的在線用戶，並做一個定時任務，其目的是用輪詢的方式定時處理在線用戶的狀態，有哪些用戶在線，又有哪些用戶離線。