SpringBoot+websocket廣播式應用
阿新 • • 發佈：2019-01-04
1、建立一個簡單的SpringBoot
專案，推薦使用idea，這裡我只選擇了websocket，thymeleaf。
2、配置websocket，需要使用@EnableWebSocketMessageBroker//註解開啟STOMP協議來傳輸基於代理（message broker）的訊息，並通過實現WebSocketMessageBrokerConfigurer，重寫其方法來配置websocket
注：springboot2.x之前的版本是繼承AbstractWebSocketMessageBrokerConfigurer,目前已過時
package com.socket.websocket.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; /** * @ClassName WebSocketConfig * @Description TODO 配置WebSocket * @Author shanzz * @Date 2018/12/29 15:55 * @Version 1.0 **/ @Configuration @EnableWebSocketMessageBroker//註解開啟STOMP協議來傳輸基於代理（message broker）的訊息，這是控制器支援使用@MessageMaping，就像使用@RequestMapping一樣 public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) {//註冊STOMP協議的節點（endpoint），並對映指定的URL registry.addEndpoint("/endpointWisely").withSockJS();//註冊一個STOMP的endpoint，並使用SocketJS協議 } @Override public void configureMessageBroker(MessageBrokerRegistry registry) {//配置訊息代理 registry.enableSimpleBroker("/topic");//廣播式應配置一個/topic訊息代理 } }
3、瀏覽器向伺服器傳送訊息
package com.socket.websocket.domain; /** * @ClassName SocketMessage * @Description TODO 瀏覽器向服務端傳送的訊息使用此類接收 * @Author shanzz * @Date 2018/12/29 16:15 * @Version 1.0 **/ public class SocketMessage { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }
4、伺服器向瀏覽器傳送訊息
package com.socket.websocket.domain; /** * @ClassName SocketResponse * @Description TODO 服務端向瀏覽器傳送此類的訊息 * @Author shanzz * @Date 2018/12/29 16:16 * @Version 1.0 **/ public class SocketResponse { private String responseMessage; public SocketResponse(String responseMessage) { this.responseMessage = responseMessage; } public String getResponseMessage() { return responseMessage; } public void setResponseMessage(String responseMessage) { this.responseMessage = responseMessage; } }
5、演示控制器
package com.socket.websocket.controller;
import com.socket.websocket.domain.SocketMessage;
import com.socket.websocket.domain.SocketResponse;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
/**
* @ClassName WebSocketController
* @Description TODO 控制器
* @Author shanzz
* @Date 2018/12/29 16:21
* @Version 1.0
**/
@Controller
public class WebSocketController {
@MessageMapping("/welcome")//當瀏覽器向服務端傳送請求時，通過@MessageMapping對映/welcome這個地址，類似於@RequestMapping
@SendTo("/topic/getResponse")//當服務端有訊息是，會對訂閱了@SendTo中的路徑的瀏覽器傳送訊息
public SocketResponse say(SocketMessage message) throws InterruptedException {
// Thread.sleep(3000);
return new SocketResponse("Welcome,"+message.getName()+"!");
}
}6、演示頁面
位置：src\main\resources\templates\ws.html
需引入外部資源:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Spring Boot+WebSocket+廣播式</title>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的瀏覽器不支援websocket</h2></noscript>
<div>
<div>
<button id="connect" onclick="connect();">連線</button>
<button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連線</button>
</div>
<div id="conversationDiv">
<label>輸入你的名字</label><input type="text" id="name" />
<button id="sendName" onclick="sendName();">傳送</button>
<p id="response"></p>
</div>
</div>
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById('connect').disabled = connected;
document.getElementById('disconnect').disabled = !connected;
document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
$('#response').html();
}
function connect() {
var socket = new SockJS('/endpointWisely'); //連線SockJS的endpoint名稱為"/endpointWisely"
stompClient = Stomp.over(socket);//使用STOMP子協議的WebSocket客戶端.
stompClient.connect({}, function(frame) {//連線WebSocket服務端
setConnected(true);
console.log('Connected: ' + frame);
//通過stompClient.subscribe訂閱/topic/getResponse目標傳送的訊息，這個是在控制器的@SendTo中定義的
stompClient.subscribe('/topic/getResponse', function(respnose){
showResponse(JSON.parse(respnose.body).responseMessage);
});
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
function sendName() {
var name = $('#name').val();
//通過stompClient.send向/welcome目標傳送訊息，這個是在控制器的@MessageMapping中定義的
stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));
}
function showResponse(message) {
var response = $("#response");
response.html(message);
}
</script>
</body>
</html>7、配置檢視解析器
package com.socket.websocket.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @ClassName WebMvcConfig
* @Description TODO 配置viewController 提供頁面的對映路徑
* @Author shanzz
* @Date 2018/12/29 16:48
* @Version 1.0
**/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("/ws");
}
}8、執行程式http://localhost:8080/ws
開啟多個瀏覽器視窗，任意一個連線向伺服器傳送訊息，其他瀏覽器都可以收到
參考自：JavaEE開發的顛覆者：SpringBoot實戰 第七章，7.6.3