springboot實現服務器端消息推送（websocket + sockjs + stomp）
阿新 • • 發佈：2018-04-15
client rem queue rip rsa socket gin enabled lis
服務器端推送技術在web開發中比較常用，可能早期很多人的解決方案是采用ajax向服務器輪詢消息，這種方式的輪詢頻率不好控制，所以大大增加了服務器的壓力，後來有了下面的方案：當客戶端向服務器發送請求時，服務器端會抓住這個請求不放，等有數據更新的時候才返回給客戶端，當客戶端接收到數據後再次發送請求，周而復始，這樣就大大減少了請求次數，減輕了服務器的壓力，當前主要有SSE(Server Send Event 服務器端事件發送)的服務器端推送和基於Servlet3.0+異步方法特性實現的服務器端推送。而本次我將利用webSokcet實現服務器端消息推送。話不多說上代碼：
1、pom.xml，新建springboot項目，加入webSocket啟動包spring-boot-starter-websocket；
2、WebSocketConfig
package com.example.demo.websocket; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer; importorg.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry; @Configuration @EnableWebSocketMessageBroker //註解開啟STOMP協議來傳輸基於代理的消息，此時控制器支持使用@MessageMapping public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Overridepublic void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic","/user");//topic用來廣播，user用來實現p2p } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/webServer").withSockJS(); registry.addEndpoint("/queueServer").withSockJS();//註冊兩個STOMP的endpoint，分別用於廣播和點對點 } }
3、接收消息類：ReceiveMessage
package com.example.demo.websocket; public class ReceiveMessage { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } }
4、響應消息類：ResponseMessage
package com.example.demo.websocket; public class ResponseMessage { private String id; private String name; private String content; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public ResponseMessage(String id, String name, String content) { super(); this.id = id; this.name = name; this.content = content; } }
5、控制器類：SubController
package com.example.demo.websocket; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.simp.SimpMessagingTemplate; import org.springframework.stereotype.Controller; @Controller public class SubController { @Autowired public SimpMessagingTemplate template; @MessageMapping("/subscribe") public void subscribe(ReceiveMessage rm) { for(int i =1;i<=20;i++) { //廣播使用convertAndSend方法，第一個參數為目的地，和js中訂閱的目的地要一致 template.convertAndSend("/topic/getResponse", rm.getName()); try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } } } @MessageMapping("/queue") public void queuw(ReceiveMessage rm) { System.out.println("進入方法"); for(int i =1;i<=20;i++) { /*廣播使用convertAndSendToUser方法，第一個參數為用戶id，此時js中的訂閱地址為 "/user/" + 用戶Id + "/message",其中"/user"是固定的*/ template.convertAndSendToUser("zhangsan","/message",rm.getName()); try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } } } }
6、在src/main/resource包下建一個static包，引入jquery-3.2.1.min.js、sock.js、stomp.js,創建topic.html和queue.html。
<html> <head> <meta charset="UTF-8"> <title>Hello topic</title> <script src="sock.js"></script> <script src="stomp.js"></script> <script src="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; $("#response").html(); } function connect() { var socket = new SockJS("/webServer"); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log(‘Connected: ‘ + frame); stompClient.subscribe(‘/topic/getResponse‘, function(response){ var response1 = document.getElementById(‘response‘); var p = document.createElement(‘p‘); p.style.wordWrap = ‘break-word‘; p.appendChild(document.createTextNode(response.body)); response1.appendChild(p); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { var name = document.getElementById(‘name‘).value; console.info(1111111111); stompClient.send("/subscribe", {}, JSON.stringify({ ‘name‘: name })); } </script> </head> <body onload="disconnect()"> <noscript><h2 style="color: #ff0000">Seems your browser doesn‘t support Javascript! Websocket relies on Javascript being enabled. Please enable Javascript and reload this page!</h2></noscript> <div> <div> <button id="connect" onclick="connect();">Connect</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> </div> <div id="conversationDiv"> <labal>名字</labal><input type="text" id="name" /> <button id="sendName" onclick="sendName();">Send</button> <p id="response"></p> </div> </div> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>Hello queue</title> <script src="sock.js"></script> <script src="stomp.js"></script> <script src="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; $("#response").html(); } function connect() { var socket = new SockJS("/queueServer"); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log(‘Connected: ‘ + frame); stompClient.subscribe(‘/user/‘+document.getElementById(‘user‘).value+‘/message‘, function(response){ var response1 = document.getElementById(‘response‘); var p = document.createElement(‘p‘); p.style.wordWrap = ‘break-word‘; p.appendChild(document.createTextNode(response.body)); response1.appendChild(p); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { var name = document.getElementById(‘name‘).value; console.info(1111111111); stompClient.send("/queue", {}, JSON.stringify({ ‘name‘: name})); } </script> </head> <body onload="disconnect()"> <noscript><h2 style="color: #ff0000">Seems your browser doesn‘t support Javascript! Websocket relies on Javascript being enabled. Please enable Javascript and reload this page!</h2></noscript> <div> <div> <labal>用戶</labal><input type="text" id="user" /> <button id="connect" onclick="connect();">Connect</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> </div> <div id="conversationDiv"> <labal>名字</labal><input type="text" id="name" /> <button id="sendName" onclick="sendName();">Send</button> <p id="response"></p> </div> </div> </body> </html>
啟動項目後，先訪問topic.html,如圖所示
訪問queue.html,首先以不同的用戶名建立連接，如圖所示
zhangsan窗口發送12345後：
lisi窗口發送67890後：
由此便實現了服務端兩種推送消息的方式（廣播 和點對點）。
springboot實現服務器端消息推送（websocket + sockjs + stomp）