首先匯入springboot-websocket依賴

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

配置WebSocketMessageBroker

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 {

    /**
     * 配置 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>