springboot整合websocket实现一对一消息推送和广播消息推送
生活随笔
收集整理的這篇文章主要介紹了
springboot整合websocket实现一对一消息推送和广播消息推送
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
springboot基礎環境,請參考springboot文檔
maven依賴
代碼準備
準備常量類
//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/用戶識別碼/msg public static final String P2PPUSHPATH = "/msg";接收前端消息實體
public class WiselyMessage {private String name;public String getName() {return name;}public void setName(String name) {this.name = name;}}
后臺發送消息實體
配置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 th:src="@{sockjs.min.js}"></script> <script th:src="@{stomp.min.js}"></script> <script th:src="@{jquery.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 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实现一对一消息推送和广播消息推送的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 康力优蓝发布新品：让AI教育从概念变成现
- 下一篇： 记一次错误的伪静态配置文件