詳解springboot集成websocket的兩種實現方式
WebSocket跟常規的http協議的區別和優缺點這裡大概描述一下
一、websocket與http
http協議是用在應用層的協議，他是基於tcp協議的，http協議建立鏈接也必須要有三次握手才能發送信息。http鏈接分為短鏈接，長鏈接，短鏈接是每次請求都要三次握手才能發送自己的信息。即每一個request對應一個response。長鏈接是在一定的期限內保持鏈接。保持TCP連接不斷開。客戶端與服務器通信，必須要有客戶端發起然後服務器返回結果。客戶端是主動的，服務器是被動的。
WebSocket是HTML5中的協議， 他是為瞭解決客戶端發起多個http請求到服務器資源瀏覽器必須要經過長時間的輪訓問題而生的，他實現瞭多路復用，他是全雙工通信。在webSocket協議下客服端和瀏覽器可以同時發送信息。
二、HTTP的長連接與websocket的持久連接
HTTP1.1的連接默認使用長連接（persistent connection），
即在一定的期限內保持鏈接，客戶端會需要在短時間內向服務端請求大量的資源，保持TCP連接不斷開。客戶端與服務器通信，必須要有客戶端發起然後服務器返回結果。客戶端是主動的，服務器是被動的。
在一個TCP連接上可以傳輸多個Request/Response消息對，所以本質上還是Request/Response消息對，仍然會造成資源的浪費、實時性不強等問題。
如果不是持續連接，即短連接，那麼每個資源都要建立一個新的連接，HTTP底層使用的是TCP，那麼每次都要使用三次握手建立TCP連接，即每一個request對應一個response，將造成極大的資源浪費。
長輪詢，即客戶端發送一個超時時間很長的Request，服務器hold住這個連接，在有新數據到達時返回Response
websocket的持久連接 隻需建立一次Request/Response消息對，之後都是TCP連接，避免瞭需要多次建立Request/Response消息對而產生的冗餘頭部信息。
Websocket隻需要一次HTTP握手，所以說整個通訊過程是建立在一次連接/狀態中，而且websocket可以實現服務端主動聯系客戶端，這是http做不到的。
springboot集成websocket的不同實現方式：
pom添加依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
因涉及到js連接服務端，所以也寫瞭對應的html，這裡集成下thymeleaf模板，前後分離的項目這一塊全都是前端做的
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置文件：
server: port: 8885 #添加Thymeleaf配置 thymeleaf: cache: false prefix: classpath:/templates/ suffix: .html mode: HTML5 encoding: UTF-8 content-type: text/html
1：自定義WebSocketServer，使用底層的websocket方法，提供對應的onOpen、onClose、onMessage、onError方法
1.1：添加webSocketConfig配置類
/**
* 開啟WebSocket支持
* Created by huiyunfei on 2019/5/31.
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
1.2：添加webSocketServer服務端類
package com.example.admin.web;
/**
* Created by huiyunfei on 2019/5/31.
*/
@ServerEndpoint("/websocket/{sid}")
@Component
@Slf4j
public class WebSocketServer {
//靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
private static int onlineCount = 0;
//concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
//與某個客戶端的連接會話，需要通過它來給客戶端發送數據
private Session session;
//接收sid
private String sid="";
*/
/**
* 連接建立成功調用的方法*//*
@OnOpen
public void onOpen(Session session, @PathParam("sid") String sid) {
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在線數加1
log.info("有新窗口開始監聽:"+sid+",當前在線人數為" + getOnlineCount());
this.sid=sid;
try {
sendMessage("連接成功");
} catch (IOException e) {
log.error("websocket IO異常");
}
}
*/
/**
* 連接關閉調用的方法
*//*
@OnClose
public void onClose() {
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //在線數減1
log.info("有一連接關閉！當前在線人數為" + getOnlineCount());
}
*/
/**
* 收到客戶端消息後調用的方法
*
* @param message 客戶端發送過來的消息*//*
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到來自窗口"+sid+"的信息:"+message);
//群發消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
*/
/**
*
* @param session
* @param error
*//*
@OnError
public void onError(Session session, Throwable error) {
log.error("發生錯誤");
error.printStackTrace();
}
*/
/**
* 實現服務器主動推送
*//*
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
*/
/**
* 群發自定義消息
* *//*
public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
log.info("推送消息到窗口"+sid+"，推送內容:"+message);
for (WebSocketServer item : webSocketSet) {
try {
//這裡可以設定隻推送給這個sid的，為null則全部推送
if(sid==null) {
item.sendMessage(message);
}else if(item.sid.equals(sid)){
item.sendMessage(message);
}
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
public static CopyOnWriteArraySet<WebSocketServer> getWebSocketSet() {
return webSocketSet;
}
}
1.3：添加對應的controller
@Controller
@RequestMapping("/system")
public class SystemController {
//頁面請求
@GetMapping("/index/{userId}")
public ModelAndView socket(@PathVariable String userId) {
ModelAndView mav=new ModelAndView("/socket1");
mav.addObject("userId", userId);
return mav;
}
//推送數據接口
@ResponseBody
@RequestMapping("/socket/push/{cid}")
public Map pushToWeb(@PathVariable String cid, String message) {
Map result = new HashMap();
try {
WebSocketServer.sendInfo(message,cid);
result.put("code", 200);
result.put("msg", "success");
} catch (IOException e) {
e.printStackTrace();
}
return result;
}
1.4：提供socket1.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>Title</title>
</head>
<body>
hello world!
</body>
<script>
var socket;
if(typeof(WebSocket) == "undefined") {
console.log("您的瀏覽器不支持WebSocket");
}else{
console.log("您的瀏覽器支持WebSocket");
//實現化WebSocket對象，指定要連接的服務器地址與端口 建立連接
//等同於
index = new WebSocket("ws://localhost:8885/websocket/2");
//socket = new WebSocket("${basePath}websocket/${cid}".replace("http","ws"));
//打開事件
index.onopen = function() {
console.log("Socket 已打開");
//socket.send("這是來自客戶端的消息" + location.href + new Date());
};
//獲得消息事件
index.onmessage = function(msg) {
console.log(msg.data);
//發現消息進入 開始處理前端觸發邏輯
};
//關閉事件
index.onclose = function() {
console.log("Socket已關閉");
};
//發生瞭錯誤事件
index.onerror = function() {
alert("Socket發生瞭錯誤");
//此時可以嘗試刷新頁面
}
//離開頁面時，關閉socket
//jquery1.8中已經被廢棄，3.0中已經移除
// $(window).unload(function(){
// socket.close();
//});
}
</script>
</html>
總結：
瀏覽器debug訪問 localhost:8885/system/index/1跳轉到socket1.html，js自動連接server並傳遞cid到服務端，服務端對應的推送消息到客戶端頁面（cid區分不同的請求，server裡提供的有群發消息方法）
2.1：基於STOMP協議的WebSocket
使用STOMP的好處在於，它完全就是一種消息隊列模式，你可以使用生產者與消費者的思想來認識它，發送消息的是生產者，接收消息的是消費者。而消費者可以通過訂閱不同的destination，來獲得不同的推送消息，不需要開發人員去管理這些訂閱與推送目的地之前的關系，spring官網就有一個簡單的spring-boot的stomp-demo,如果是基於springboot，大傢可以根據spring上面的教程試著去寫一個簡單的demo。
提供websocketConfig配置類
/**
* @Description:
registerStompEndpoints(StompEndpointRegistry registry)
configureMessageBroker(MessageBrokerRegistry config)
這個方法的作用是定義消息代理，通俗一點講就是設置消息連接請求的各種規范信息。
registry.enableSimpleBroker("/topic")表示客戶端訂閱地址的前綴信息，也就是客戶端接收服務端消息的地址的前綴信息（比較繞，看完整個例子，大概就能明白瞭）
registry.setApplicationDestinationPrefixes("/app")指服務端接收地址的前綴，意思就是說客戶端給服務端發消息的地址的前綴
* @Author:[email protected]
* @Date: 2019/5/31
*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
// 這個方法的作用是添加一個服務端點，來接收客戶端的連接。
// registry.addEndpoint("/socket")表示添加瞭一個/socket端點，客戶端就可以通過這個端點來進行連接。
// withSockJS()的作用是開啟SockJS支持，
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/socket").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
//表示客戶端訂閱地址的前綴信息，也就是客戶端接收服務端消息的地址的前綴信息
registry.enableSimpleBroker("/topic");
//指服務端接收地址的前綴，意思就是說客戶端給服務端發消息的地址的前綴
registry.setApplicationDestinationPrefixes("/app");
}
}
2.2：controller提供對應請求的接口
//頁面請求
@GetMapping("/socket2")
public ModelAndView socket2() {//@PathVariable String userId
ModelAndView mav=new ModelAndView("html/socket2");
//mav.addObject("userId", userId);
return mav;
}
/**
* @Description:這個方法是接收客戶端發送功公告的WebSocket請求，使用的是@MessageMapping
* @Author:[email protected]
* @Date: 2019/5/31
*/
@MessageMapping("/change-notice")//客戶端訪問服務端的時候config中配置的服務端接收前綴也要加上 例：/app/change-notice
@SendTo("/topic/notice")//config中配置的訂閱前綴記得要加上
public CustomMessage greeting(CustomMessage message){
System.out.println("服務端接收到消息："+message.toString());
//我們使用這個方法進行消息的轉發發送！
//this.simpMessagingTemplate.convertAndSend("/topic/notice", value);(可以使用定時器定時發送消息到客戶端)
// @Scheduled(fixedDelay = 1000L)
// public void time() {
// messagingTemplate.convertAndSend("/system/time", new Date().toString());
// }
//也可以使用sendTo發送
return message;
}
2.3：提供socket2.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="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.min.js}"></script>
<script th:src="@{/js/jquery-3.2.1.min.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('/socket'); //1
stompClient = Stomp.over(socket);//2
stompClient.connect({}, function(frame) {//3
setConnected(true);
console.log('開始進行連接Connected: ' + frame);
stompClient.subscribe('/topic/notice', function(respnose){ //4
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("/app/change-notice", {}, JSON.stringify({ 'name': name }));//5
}
function showResponse(message) {
var response = $("#response");
response.html(message);
}
</script>
</body>
</html>
2.4:對應的js引用可以去網上下載
2.5：瀏覽器debug訪問localhost:8885/system/socket2，點擊連接連接到服務器，數據內容可以推送到服務器以及服務器消息回推。
2.6：實現前端和服務端的輪訓可以頁面Ajax輪訓也可以後端添加定時器
@Component
@EnableScheduling
public class TimeTask {
private static Logger logger = LoggerFactory.getLogger(TimeTask.class);
@Scheduled(cron = "0/20 * * * * ?")
public void test(){
System.err.println("********* 定時任務執行 **************");
CopyOnWriteArraySet<WebSocketServer> webSocketSet =
WebSocketServer.getWebSocketSet();
int i = 0 ;
webSocketSet.forEach(c->{
try {
c.sendMessage(" 定時發送 " + new Date().toLocaleString());
} catch (IOException e) {
e.printStackTrace();
}
});
System.err.println("/n 定時任務完成.......");
}
}
代碼在https://github.com/huiyunfei/spring-cloud.git 的admin項目裡
基於STOMP協議的廣播模式和點對點模式消息推送可參考：
https://www.cnblogs.com/hhhshct/p/8849449.html
https://www.cnblogs.com/jmcui/p/8999998.html
到此這篇關於springboot集成websocket的兩種實現方式的文章就介紹到這瞭,更多相關springboot集成websocket內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- SpringBoot+WebSocket實現消息推送功能
- SpringBoot集成WebSocket實現後臺向前端推送信息的示例
- SpringBoot WebSocket實時監控異常的詳細流程
- springboot整合websocket最基礎入門使用教程詳解
- SpringBoot2.0集成WebSocket實現後臺向前端推送信息