golang 演算法課程 正式開課--第一季 第1節
阿新 • • 發佈:2022-05-04
首先匯入springboot-websocket依賴
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
配置WebSocketMessageBroker
import org.springframework.context.annotation.Configuration; importorg.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 @EnableWebSocketMessageBrokerpublic class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置 WebSocket 進入點,及開啟使用 SockJS,這些配置主要用配置連線端點,用於 WebSocket 連線 * * @param registry STOMP 端點 */ @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ssh").withSockJS(); } /** * 配置訊息代理選項 * * @param registry 訊息代理註冊配置 */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { // 設定一個或者多個代理字首,在 Controller 類中的方法裡面發生的訊息,會首先轉發到代理從而傳送到對應廣播或者佇列中。 registry.enableSimpleBroker("/topiclog"); // 配置客戶端傳送請求訊息的一個或多個字首,該字首會篩選訊息目標轉發到 Controller 類中註解對應的方法裡 registry.setApplicationDestinationPrefixes("/listenlog"); } }
配置訊息代理類
import lombok.Data; @Data public class MessageBody { /** 傳送訊息的使用者 */ private String from; /** 訊息內容 */ private String content; /** 目標使用者(告知 STOMP 代理轉發到哪個使用者) */ private String targetUser; /** 廣播轉發的目標地址(告知 STOMP 代理轉發到哪個地方) */ private String destination; }
通過實現applicationListener可以監聽websocket的連線 斷開連線 關注 取消關注事件 比如:斷開事件
@Component @Slf4j public class SocketDisConnectedEventListener implements ApplicationListener<SessionDisconnectEvent> { @Override public void onApplicationEvent(SessionDisconnectEvent event) { String sessionId = event.getSessionId(); MessageController.istrue=false; //MessageController.SOCKET_MAP.put(sessionId, false); log.info("連結斷開"); log.debug(sessionId); } }
推送訊息
@Slf4j @Controller public class MessageController { /** 訊息傳送工具物件 */ @Autowired private SimpMessageSendingOperations simpMessageSendingOperations; /** 廣播發送訊息,將訊息傳送到指定的目標地址 */ @MessageMapping("/log/{topicname}") public void sendTopicMessage(MessageBody messageBody, @PathVariable String topicname) {
simpMessageSendingOperations.convertAndSend(messageBody.getDestination(),"test");
} catch (Exception e) {
e.printStackTrace();
}
前端呼叫
// 設定 STOMP 客戶端 var stompClient = null; // 設定 WebSocket 進入端點 var SOCKET_ENDPOINT = "/ssh"; // 設定訂閱訊息的請求字首 var SUBSCRIBE_PREFIX = "/topiclog" // 設定訂閱訊息的請求地址 var SUBSCRIBE = ""; // 設定伺服器端點,訪問伺服器中哪個介面 var TOPIC_NAME=$("#stype").val()=='collect'?$("#topicName").val():$("#topicName").val()+"_ANA"; var SEND_ENDPOINT = "/listenlog/log/"+TOPIC_NAME; var sessionId=""; /* 進行連線 */ function connect() { loading.mask("請稍後", BOMF.CONST.SHOW_LOADING_ANIMATION_AFTER_SAVE); $("#logdiv").html(""); // 設定 SOCKET var socket = new SockJS(SOCKET_ENDPOINT); // 配置 STOMP 客戶端 stompClient = Stomp.over(socket); // STOMP 客戶端連線 stompClient.connect({}, function (frame) { console.log("連線成功"); subscribeSocket(); setTimeout(() => { sendMessageNoParameter(); }, 1000); }); } /* 訂閱資訊 */ function subscribeSocket(){ var num=1; // 設定訂閱地址 SUBSCRIBE = SUBSCRIBE_PREFIX+"/"+TOPIC_NAME ; // 輸出訂閱地址 console.log("設定訂閱地址為:" + SUBSCRIBE); // 執行訂閱訊息 var logdiv=document.getElementById("logdiv"); stompClient.subscribe(SUBSCRIBE, function (responseBody) { //返回訊息在這裡處理 // console.log(); // if(num==1){ // num=2; // sessionId=responseBody.body // } var body=responseBody.body; logdiv.scrollTop=logdiv.scrollHeight; loading.unmask(); if(body.indexOf("over")==-1){ if($("#logdiv").children().length>40){ $("#logdiv").children().remove(); } var htmlValue="<p style='white-space:nowrap;'>"+body+"</p>"; $("#logdiv").append(htmlValue); }else{ var time=body.split("====")[1]; var htmlValue="<p style='white-space:nowrap;'>日誌資訊每次預設監聽"+time+"秒,如需繼續檢視,請重新進入</p>"; $("#logdiv").append(htmlValue); disconnect(); } }); } /* 斷開連線 */ function disconnect() { // if(stompClient!=null){ stompClient.disconnect(function() { console.log("斷開連線"); }); // } } /* 傳送訊息並指定目標地址(這裡設定的目標地址為自身訂閱訊息的地址,當然也可以設定為其它地址) */ function sendMessageNoParameter() { // 設定傳送的內容 //var sendContent = "nihao"; // 設定待發送的訊息內容 var message = '{"destination": "' + SUBSCRIBE + '", "content": "' + TOPIC_NAME + '"}'; // 傳送訊息 stompClient.send(SEND_ENDPOINT, {}, message); }
頁面呼叫
<script src="/busicomps/ggdsj/content/sshmstsc/sshsocket.js"></script> <div class="container-fluid app-container fullheight"> <div class="app-content fullheight"> <div class="panel panel-default no-footer fullheight"> <div class="panel-content" id="logdiv" style="height: 800px;" > </div> </div> </div> </div> <script type="text/javascript"> new Vue({ i18n: vue2 == true ? app.$i18n : null, created: function () { this.$nextTick(function () { connect(); }); } }).$mount(app.i18nDiv); </script>