前言
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
如果你覺得我的部落格對你有幫助,可以給我點兒打賞,左側微信,右側支付寶。
有可能就是你的一點打賞會讓我的部落格寫的更好:)