SpringBoot2.x集成WebSocket

WebSocket 不做過多得介紹，這里有篇比較全面得文章      Spring Boot系列十六 WebSocket簡介和spring boot集成簡單消息代理

我這里是精簡版，只挑出核心代碼記錄。免得浪費大家時間

⒈項目導入依賴

        <!-- 引入 websocket 依賴-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

⒉編寫websocket配置

package cn.coreqi.consumer.config;

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

/**
 * 配置消息代理，默認情況下使用內置的消息代理。
 * @EnableWebSocketMessageBroker 此注解表示使用STOMP協議來傳輸基於消息代理的消息，此時可以在@Controller類中使用@MessageMapping
 */
@Configuration
@EnableWebSocketMessageBroker
//SpringBoot2.x將extends AbstractWebSocketMessageBrokerConfigurer改為 implements WebSocketMessageBrokerConfigurer
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 注冊 Stomp的端點 配置對外暴露訪問的端點
     * @param registry
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket-simple")   //添加STOMP協議的端點。
                // 這個URL是供WebSocket客戶端或SockJS客戶端連接服務端訪問的地址。
                .setAllowedOrigins("*") //添加允許跨域訪問
                .withSockJS();  //指定端點使用SockJS協議
    }

    /**
     * 配置消息代理
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //啟動簡單Broker，客戶端請求地址符合配置的前綴，消息才會發送到這個broker
        //客戶端訂閱當前服務端時需要添加以下請求前綴，topic一般用於廣播推送，queue用於點對點推送
        registry.enableSimpleBroker("/userTest","/topicTest");
        //如果不設置下面這一句，使用SimpMessagingTemplate.convertAndSendToUser向指定用戶推送消息時
        //訂閱前綴只能為/user，例如前端訂閱為/user/fanqi/info
        registry.setUserDestinationPrefix("/userTest");
        //客戶端（html客戶端、java客戶端等）向服務端發送消息的請求前綴
        registry.setApplicationDestinationPrefixes("/app");
    }

}

⒊編寫控制器

package cn.coreqi.consumer.controller;

import org.springframework.beans.factory.annotation.Autowired;
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.RequestMapping;

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

@Controller
@EnableScheduling   //定時任務支持
public class WebSocketController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;


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

    /**
     * 這里用於客戶端推送消息到服務端，推送地址為：setApplicationDestinationPrefixes("/app")設置得前綴加上@MessageMapping注解得地址
     * 此處為/app/send
     * 當前方法處理后將結果轉發給@SendTo注解得地址，如果沒有指定，則采用默認
     * @MessageMapping 指定要接收消息的地址，類似@RequestMapping。除了注解到方法上，也可以注解到類上
     * @SendTo 默認消息將被發送到與傳入消息相同的目的地，但是目的地前面附加前綴（默認情況下為"/topic")
     * @param message 客戶端推送過來得消息，一般生產環境會封裝
     * @return
     * @throws Exception
     */
    @MessageMapping("/send")
    @SendTo("/topicTest/web-to-server-to-web")
    public String greeting(String message) throws Exception {
        // 模擬延時，以便測試客戶端是否在異步工作
        Thread.sleep(1000);
        return "Hello, " + message + "!";
    }

    /**
     * 最基本的服務器端主動推送消息給客戶端
     * @return
     * @throws Exception
     */
    @Scheduled(initialDelay = 7000,fixedRate = 2000)
    public String serverTime() throws Exception {
        // 發現消息
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messagingTemplate.convertAndSend("/topicTest/servertime", df.format(new Date()));
        return "servertime";
    }

    /**
     * 服務端推送消息到指定用戶得客戶端
     * 例如以下將會推送到
     * 因為設置了setUserDestinationPrefix("/userTest")，因此推送到/userTest/fanqi/info
     * 如果沒有設置setUserDestinationPrefix()，則默認前端為user，將會推送到/user/fanqi/info
     * 客戶端訂閱/userTest/fanqi/info將會收到服務端推送得消息
     * @return
     * @throws Exception
     */
    @Scheduled(initialDelay = 7000,fixedRate = 2000)
    public String serverTimeToUser() throws Exception {
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        messagingTemplate.convertAndSendToUser("fanqi","/info", df.format(new Date()));
        return "serverTimeToUser";
    }
}

⒋前端websocket客戶端代碼

<!DOCTYPE html>
<html>
<head>
    <title>玩轉spring boot——websocket</title>
    <script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script type="text/javascript">
        var stompClient = null;

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

            $scope.data = {
                connected : false,
                sendMessage : '',
                receivMessages : []
            };

            //連接
            $scope.connect = function() {
                var socket = new SockJS('/websocket-simple');
                stompClient = Stomp.over(socket);
                stompClient.connect({}, function(frame) {
                    // 訂閱后端主動推消息到前端的topic
                    stompClient.subscribe('/topicTest/servertime', function(r) {
                        $scope.data.time = '當前服務器時間：' + r.body;
                        $scope.data.connected = true;
                        $scope.$apply();
                    });
                    // 閱后端主動推消息到前端的topic,只有指定的用戶(hzb)收到的的消息
                    stompClient.subscribe('/userTest/fanqi/info', function(r) {
                        $scope.data.hzbtime = '當前服務器時間：' + r.body;
                        $scope.data.connected = true;
                        $scope.$apply();
                    });
                    // 訂閱前端發到后台，后台又將消息返回前台的topic
                    stompClient.subscribe('/topicTest/web-to-server-to-web', function(msg) {
                        $scope.data.receivMessages.push(msg.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.sendMessage
                }));
            }
        });
    </script>
</head>
<body ng-app="app" ng-controller="MainController">

<h2>websocket示例</h2>
<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">
    <h4>以下是websocket的服務端主動推送消息到頁面的例子</h4>
    <label>{{data.time}}</label> <br/> <br/>
</div>
<div ng-show="data.connected">
    <h4>以下是websocket的服務端主動推送消息到頁面的例子,只有hzb這個用戶收到</h4>
    <label>{{data.hzbtime}}</label> <br/> <br/>
</div>
<div ng-show="data.connected">
    <h4>以下是websocket的客戶端發消息到服務端，服務端再將該消息返回到客戶端（頁面）的例子</h4>
    <input type="text" ng-model="data.sendMessage" placeholder="請輸入內容..." />
    <button ng-click="send()" type="button">發送</button>
    <br/>
    <table>
        <thead>
        <tr>
            <th>消息內容:</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="messageContent in data.receivMessages">
            <td>{{messageContent}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>