生活随笔
收集整理的這篇文章主要介紹了
SpringBoot WebSocket Stomp
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關注 “弋凡”（YiFan）微信公眾號吧 記錄簡單筆記 做你的最愛
websocket 是什么？
是一種網絡通信協議，很多高級功能都需要它
為什么要使用websocket？
已經有了HTTP協議 為撒還需要使用WebSocket 嘞？
HTTP 是客戶端請求服務端響應數據，但是我們如果想服務端給客戶端發送消息嘞？
于是乎就有了這種協議，客戶端，服務端可以雙向發送消息
最典型的就是聊天系統
stomp
stomp 既 Simple (or Streaming) Text Orientated Messaging Protocol
簡單(流)文本定向消息協議
為什么需要stomp？
常規的websocket連接和普通的TCP基本上沒區別
所以STOMP在websocket上提供了一中基于幀線路格式（frame-based wire format）
簡單一點，就是在我們的websocket（TCP）上面加了一層協議，使雙方遵循這種協議來發送消息
服務端：/app，這里訪問服務端，前綴通過設定的方式訪問
用戶：/user,這里針對的是用戶消息的傳遞，針對于當前用戶進行傳遞。
其他消息：/topic、/queue，這兩種方式。都是定義出來用于訂閱服務端
SpringBoot WebSocket 案例
導入pom依賴
<!-- websocket-->
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
websocket配置 - WebSocketConfig
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;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {// 基于STOMP協議的WebSocket@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 注冊一個websocket端點，客戶端將使用它連接到我們的websocket服務器。registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();}// 注冊相關服務@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {//定義了服務端接收地址的前綴，也即客戶端給服務端發消息的地址前綴registry.setApplicationDestinationPrefixes("/yifan");//定義了一個（或多個）客戶端訂閱地址的前綴信息，也就是客戶端接收服務端發送消息的前綴信息registry.enableSimpleBroker("/topic","/user");// 點對點使用的訂閱前綴（客戶端訂閱路徑上會體現出來），不設置的話，默認也是/user/registry.setUserDestinationPrefix("/user/");}
}
服務端 controller
@Controller
@RequestMapping("yifan")
public class ChatController {@Autowiredprivate SocketService socketService
;@MessageMapping("/chat")public void broadCast(SocketMessage message
){socketService
.sendToMsg(message
);}@MessageMapping("/chatTo")public void serverSendUesrMsg(SocketMessage message
){socketService
.sendToUserMsg(message
);}
}
客戶端 網頁
需要準備
- jquery.min.js https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js
- sockjs.min.js sockjs
- stomp.js stomp
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport"><title>YF 頻道</title><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="/css/mycss.css">
</head>
<body><div style="background: #6777ef;width: 100vw ;height: 100px;text-align: center; margin-bottom: 50px;"><p style="font-weight: bold;color: white;font-size: 24px; padding-top: 15px ">YFTOOLS</p><input type="hidden" th:value="${session.user.uname}" class="uname"><div class="container tools-top-page">弋凡 聊天頻道 </div>
</div><div class="container" id="app"><div class="row" style="border: 1px solid #000000"><div class="col col-sm-8" id="msg" style="border-right: 2px solid #6777ef;height: 500px;overflow:auto; " ></div><div class="col col-sm-4"><ul id="ras"><li v-for="(item,i) in users"><input type="radio" :value="item.uname" name="redio"> {{item.uname}}</li></ul></div></div><div class="row"><div class="col-8"><textarea class="form-control" id="texts"style="position: absolute;left: 0px"></textarea></div><div class="col-4"><button class="btn btn-info one">個人</button><button class="btn btn-info all">群發</button></div></div>
</div>
</body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="/js/chat/sockjs.min.js"></script>
<script src="/js/chat/stomp.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>new Vue({el:'#app',data:{users:[],},mounted(){this.chat();},methods:{chat(){axios.get('/user/All').then(res=>{this.users = res.data;})}}});var name ='';// 連接var socket = new SockJS("http://126.75.109.85:81/socket");stompClient = Stomp.over(socket);stompClient.connect( {}, function (frame) {//訂閱廣播stompClient.subscribe('/topic/message', function (res) {$("#msg").append("<p class='text-center' ><span>"+JSON.parse(res.body).name +"</span>" + "<span style='color: red'> (全體消息) : </span>" + JSON.parse(res.body).message + " </p>");});// 個人 == > 接收的消息 (訂閱自己)name = $(".uname").val();stompClient.subscribe('/user/'+name+'/ptp', function (res) {console.log(name+"---------");// showGreeting(JSON.parse(data.body).content);console.log("res => "+res);$("#msg").append(" <div class='media text-left'> <img src='https://q4.qlogo.cn/g?b=qq&nk=2050781802@qq.com&s=3?d=retro' alt='null' class='rounded-circle mr-1' width='40px'>" +" <div class='media-body'><h5 class='mt-0'> "+JSON.parse(res.body).name+" </h5>"+JSON.parse(res.body).message +"</div> </div> ");});},function (error) {console.log('連接失敗【' + error + '】');});// 斷開連接$("#disconnect").click(function () {if (stompClient !== null) {stompClient.disconnect();alert('用戶: '+name+' ...斷開連接...');$("#msg").html("");}});// 單個發送$(".one").click(function () {var info = {};info.toname = $('input:radio:checked').val();info.name = name ;info.message = $("#texts").val();info.date = "1212";if(info.toname != info.name && info.message != null && info.message!='' ){$("#msg").append(" <div class='media text-right'>" +" <div class='media-body'><h5 class='mt-0'> "+ info.name+" </h5>"+info.message +"</div> <img class='rounded-circle mr-1' width='40px' src='https://q4.qlogo.cn/g?b=qq&nk=2050781802@qq.com&s=3?d=retro' alt='null'> </div> ");stompClient.send("/yifan/chatTo", {}, JSON.stringify(info) );}else {alert("不能給自己發送消息,內容不能為空~")}clearText();});// 群發$(".all").click(function () {var info = {};info.name = name;info.message = $("#texts").val();info.date = "1212";stompClient.send("/yifan/chat", {}, JSON.stringify(info) );clearText();});// 清空輸入框function clearText(){$("#texts").val("");}//窗口關閉時，關閉連接window.οnbefοreunlοad=function() {socket.close();};</script>
</html>
效果圖
end –
快來關注“弋凡”微信公眾號吧
總結
以上是生活随笔為你收集整理的SpringBoot WebSocket Stomp的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
