玩轉spring boot——websocket

 前言

---

 

　　QQ這類即時通訊工具多數是以桌面應用的方式存在。在沒有websocket出現之前，如果開發一個網頁版的即時通訊應用，則需要定時重新整理頁面或定時呼叫ajax請求，這無疑會加大伺服器的負載和增加了客戶端的流量。而websocket的出現，則完美的解決了這些問題。

spring boot對websocket進行了封裝，這對實現一個websocket網頁即時通訊應用來說，變得非常簡單。

 

一、準備工作

---

 

pom.xml引入

<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>

 

二、程式碼編寫

---

 

1.建立名為“WebSocketConfig.java”的類來配置websocket，並繼承抽象類“AbstractWebSocketMessageBrokerConfigurer”

此類宣告“@EnableWebSocketMessageBroker”的註解

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();
    }

}

這裡配置了以“/app”開頭的websocket請求url。和名為“my-websocket”的endpoint(端點)

 

2.編寫一個DTO類來承載訊息：

package com.example;

public class SocketMessage {

    public String message;

    public String date;

}

 

3.建立App.java類，用於啟用spring boot和用於接收、傳送訊息的控制器。

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";
    }
}

 

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

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

 

4.在“resources/templates”目錄下建立index.html檔案：

<!DOCTYPE html>
<html>
<head>
<title>玩轉spring boot——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">

    <h2>玩轉spring boot——websocket</h2>
    <h4>
        出處：劉冬部落格 <a href="http://www.cnblogs.com/goodhelper">http://www.cnblogs.com/goodhelper</a>
    </h4>

    <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>

 

除了引用angular.js的CDN檔案外，還需要引用sockjs和stomp。

 

完整的專案結構，如下圖所示：

 

三、執行效果

---

 

 

 

點選“連線”按鈕，出現傳送訊息的輸入框。並接收到伺服器端的時間推送。

輸入傳送內容並點選“傳送”按鈕後，頁面顯示出剛才傳送的訊息。

點選“斷開”按鈕，則伺服器端不會再推送訊息。

 

 

總結

---

 

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

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

 

參考：

http://spring.io/guides/gs/scheduling-tasks/
http://spring.io/guides/gs/messaging-stomp-websocket/

 

程式碼地址：

https://github.com/carter659/spring-boot-16

 

如果你覺得我的部落格對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的部落格寫的更好:)

 

返回玩轉spring boot系列目錄