QQ這類即時(shí)通訊工具多數(shù)是以桌面應(yīng)用的方式存在。在沒(méi)有websocket出現(xiàn)之前，如果開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)版的即時(shí)通訊應(yīng)用，則需要定時(shí)刷新頁(yè)面或定時(shí)調(diào)用ajax請(qǐng)求，這無(wú)疑會(huì)加大服務(wù)器的負(fù)載和增加了客戶端的流量。而websocket的出現(xiàn)，則完美的解決了這些問(wèn)題。
spring boot對(duì)websocket進(jìn)行了封裝，這對(duì)實(shí)現(xiàn)一個(gè)websocket網(wǎng)頁(yè)即時(shí)通訊應(yīng)用來(lái)說(shuō)，變得非常簡(jiǎn)單。
一、準(zhǔn)備工作
pom.xml引入
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId></dependency>
完整的pom.xml文件代碼如下：
pom.xml
二、代碼編寫(xiě)
1.創(chuàng)建名為“WebSocketConfig.java”的類來(lái)配置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
@EnableWebSocketMessageBrokerpublic 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”開(kāi)頭的websocket請(qǐng)求url。和名為“my-websocket”的endpoint(端點(diǎn))
2.編寫(xiě)一個(gè)DTO類來(lái)承載消息：
package com.example;public class SocketMessage { public String message; public String date;
}
3.創(chuàng)建App.java類，用于啟用spring boot和用于接收、發(fā)送消息的控制器。
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
@SpringBootApplicationpublic 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 { // 發(fā)現(xiàn)消息
DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
messagingTemplate.convertAndSend("/topic/callback", df.format(new Date())); return "callback";
}
}
“send”方法用于接收客戶端發(fā)送過(guò)來(lái)的websocket請(qǐng)求。
@EnableScheduling注解為：啟用spring boot的定時(shí)任務(wù)，這與“callback”方法相呼應(yīng)，用于每隔1秒推送服務(wù)器端的時(shí)間。
4.在“resources/templates”目錄下創(chuàng)建index.html文件：
<!DOCTYPE html><html><head><title>玩轉(zhuǎn)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 = { //連接狀態(tài) connected : false, //消息 message : '',
rows : []
}; //連接 $scope.connect = function() { var socket = new SockJS('/my-websocket');
stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) { // 注冊(cè)發(fā)送消息 stompClient.subscribe('/topic/send', function(msg) {
$scope.data.rows.push(JSON.parse(msg.body));
$scope.data.connected = true;
$scope.$apply();
}); // 注冊(cè)推送時(shí)間回調(diào) stompClient.subscribe('/topic/callback', function(r) {
$scope.data.time = '當(dāng)前服務(wù)器時(shí)間：' + 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>玩轉(zhuǎn)spring boot——websocket</h2>
<h4>
出處：劉冬博客 <a href="http://www.cnblogs.com/goodhelper">http://www.cnblogs.com/goodhelper</a>
</h4>
<label>WebSocket連接狀態(tài):</label>
<button type="button" ng-disabled="data.connected" ng-click="connect()">連接</button>
<button type="button" ng-click="disconnect()"
ng-disabled="!data.connected">斷開(kāi)</button>
<br />
<br />
<div ng-show="data.connected">
<label>{{data.time}}</label> <br /> <br /> <input type="text"
ng-model="data.message" placeholder="請(qǐng)輸入內(nèi)容..." />
<button ng-click="send()" type="button">發(fā)送</button>
<br /> <br /> 消息列表： <br />
<table>
<thead>
<tr>
<th>內(nèi)容</th>
<th>時(shí)間</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。
完整的項(xiàng)目結(jié)構(gòu)，如下圖所示：
三、運(yùn)行效果
點(diǎn)擊“連接”按鈕，出現(xiàn)發(fā)送消息的輸入框。并接收到服務(wù)器端的時(shí)間推送。
輸入發(fā)送內(nèi)容并點(diǎn)擊“發(fā)送”按鈕后，頁(yè)面顯示出剛才發(fā)送的消息。
點(diǎn)擊“斷開(kāi)”按鈕，則服務(wù)器端不會(huì)再推送消息。
總結(jié)
在開(kāi)發(fā)一個(gè)基于web的即時(shí)通訊應(yīng)用的過(guò)程中，我們還需考慮session的機(jī)制。
還需要一個(gè)集合來(lái)承載當(dāng)前的在線用戶，并做一個(gè)定時(shí)任務(wù)，其目的是用輪詢的方式定時(shí)處理在線用戶的狀態(tài)，有哪些用戶在線，又有哪些用戶離線。
參考：
http://spring.io/guides/gs/scheduling-tasks/
http://spring.io/guides/gs/messaging-stomp-websocket/
代碼地址：
https://github.com/carter659/spring-boot-16
如果你覺(jué)得我的博客對(duì)你有幫助，可以給我點(diǎn)兒打賞，左側(cè)微信，右側(cè)支付寶。
有可能就是你的一點(diǎn)打賞會(huì)讓我的博客寫(xiě)的更好:)
http://www.cnblogs.com/GoodHelper/p/7078381.html
延伸閱讀
- 玩轉(zhuǎn)spring boot——結(jié)合docker 2017-01-09
- 玩轉(zhuǎn)spring boot——快速開(kāi)始 2017-01-04
玩轉(zhuǎn)spring boot——結(jié)合docker