當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Springboot整合websocket实现一对一消息推送和广播消息推送

發布時間：2025/3/20 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Springboot整合websocket实现一对一消息推送和广播消息推送小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今日推薦

后端接口如何提高性能？

16 個寫代碼的好習慣

為什么不推薦使用BeanUtils屬性轉換工具

盤點阿里巴巴 34 個牛逼 GitHub 項目

常見代碼重構技巧（非常實用）

作者：kunm

segmentfault.com/a/1190000011908831

springboot基礎環境

請參考springboot文檔

maven依賴

????????<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

代碼準備

準備常量類

????//webSocket相關配置//鏈接地址public?static?String?WEBSOCKETPATHPERFIX?=?"/ws-push";public?static?String?WEBSOCKETPATH?=?"/endpointWisely";//消息代理路徑public?static?String?WEBSOCKETBROADCASTPATH?=?"/topic";//前端發送給服務端請求地址public?static?final?String?FORETOSERVERPATH?=?"/welcome";//服務端生產地址,客戶端訂閱此地址以接收服務端生產的消息public?static?final?String?PRODUCERPATH?=?"/topic/getResponse";//點對點消息推送地址前綴public?static?final?String?P2PPUSHBASEPATH?=?"/user";//點對點消息推送地址后綴,最后的地址為/user/用戶識別碼/msgpublic?static?final?String?P2PPUSHPATH?=?"/msg";

接收前端消息實體

public?class?WiselyMessage?{private?String?name;public?String?getName()?{return?name;}public?void?setName(String?name)?{this.name?=?name;} }

后臺發送消息實體

private?String?responseMessage;public?WiselyResponse(String?responseMessage){this.responseMessage?=?responseMessage;}public?String?getResponseMessage()?{return?responseMessage;}public?void?setResponseMessage(String?responseMessage)?{this.responseMessage?=?responseMessage;} 配置websocket @Configuration //?@EnableWebSocketMessageBroker注解用于開啟使用STOMP協議來傳輸基于代理（MessageBroker）的消息，這時候控制器（controller） //?開始支持@MessageMapping,就像是使用@requestMapping一樣。 @EnableWebSocketMessageBroker public?class?WebSocketConfig?extends?AbstractWebSocketMessageBrokerConfigurer?{@Overridepublic?void?registerStompEndpoints(StompEndpointRegistry?stompEndpointRegistry)?{//注冊一個Stomp的節點（endpoint）,并指定使用SockJS協議。stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).withSockJS();}@Overridepublic?void?configureMessageBroker(MessageBrokerRegistry?registry)?{//服務端發送消息給客戶端的域,多個用逗號隔開registry.enableSimpleBroker(Constant.WEBSOCKETBROADCASTPATH,?Constant.P2PPUSHBASEPATH);//定義一對一推送的時候前綴registry.setUserDestinationPrefix(Constant.P2PPUSHBASEPATH);//定義websoket前綴registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);} } service @Service public?class?WebSocketService?{@Autowiredprivate?SimpMessagingTemplate?template;/***?廣播*?發給所有在線用戶**?@param?msg*/public?void?sendMsg(WiselyResponse?msg)?{template.convertAndSend(Constant.PRODUCERPATH,?msg);}/***?發送給指定用戶*?@param?users*?@param?msg*/public?void?send2Users(List<String>?users,?WiselyResponse?msg)?{users.forEach(userName?->?{template.convertAndSendToUser(userName,?Constant.P2PPUSHPATH,?msg);});} }

控制器

@Controller public?class?WsController?{@ResourceWebSocketService?webSocketService;@MessageMapping(Constant.FORETOSERVERPATH)//@MessageMapping和@RequestMapping功能類似，用于設置URL映射地址，瀏覽器向服務器發起請求，需要通過該地址。@SendTo(Constant.PRODUCERPATH)//如果服務器接受到了消息，就會對訂閱了@SendTo括號中的地址傳送消息。public?WiselyResponse?say(WiselyMessage?message)?throws?Exception?{List<String>?users?=?Lists.newArrayList();users.add("d892bf12bf7d11e793b69c5c8e6f60fb");//此處寫死只是為了方便測試,此值需要對應頁面中訂閱個人消息的userIdwebSocketService.send2Users(users,?new?WiselyResponse("admin?hello"));return?new?WiselyResponse("Welcome,?"?+?message.getName()?+?"!");} }

頁面

<!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><p?id="response1"></p></div> </div>  <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?src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script?th:inline="javascript">var?stompClient?=?null;//此值有服務端傳遞給前端,實現方式沒有要求var?userId?=?[[${userId}]];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');?//1連接SockJS的endpoint是“endpointWisely”，與后臺代碼中注冊的endpoint要一樣。stompClient?=?Stomp.over(socket);//2創建STOMP協議的webSocket客戶端。stompClient.connect({},?function(frame)?{//3連接webSocket的服務端。setConnected(true);console.log('開始進行連接Connected:?'?+?frame);//4通過stompClient.subscribe（）訂閱服務器的目標是'/topic/getResponse'發送過來的地址，與@SendTo中的地址對應。stompClient.subscribe('/topic/getResponse',?function(respnose){showResponse(JSON.parse(respnose.body).responseMessage);});//4通過stompClient.subscribe（）訂閱服務器的目標是'/user/'?+?userId?+?'/msg'接收一對一的推送消息,其中userId由服務端傳遞過來,用于表示唯一的用戶,通過此值將消息精確推送給一個用戶stompClient.subscribe('/user/'?+?userId?+?'/msg',?function(respnose){console.log(respnose);showResponse1(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里的地址對應。因為我們配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加前綴/ws-push/stompClient.send("/ws-push/welcome",?{},?JSON.stringify({?'name':?name?}));}function?showResponse(message)?{var?response?=?$("#response");response.html(message);}function?showResponse1(message)?{var?response?=?$("#response1");response.html(message);} </script> </body> </html>

測試

點擊連接控制臺輸出

表示連接成功并且訂閱了兩個地址

此時在文本框內輸入任意值，結果如圖所示則代表成功

控制臺中顯示依次為,發送信息,目標長度內容

此時服務端控制器接收到請求

同時給指定用戶發送了消息,所以控制臺接收到消息

同時因為控制器有注解@SendTo所以會向@SendTo的地址廣播消息,客戶端訂閱了廣播地址所有控制臺顯示接收了消息

總結

以上是生活随笔為你收集整理的Springboot整合websocket实现一对一消息推送和广播消息推送的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Redis+Nginx+JVM+设计模式
下一篇：使用 Redis 实现一个轻量级的搜索引