**1. 五種監聽事件** ```java @Component public class ConnectListener implements ApplicationListener<SessionConnectEvent> { @Override public void onApplicationEvent(SessionConnectEvent event) { System.out.println("正在建立連接."); } } @Component public class ConnectedListener implements ApplicationListener<SessionConnectedEvent> { @Override public void onApplicationEvent(SessionConnectedEvent event) { System.out.println("已經建立連接."); } } @Component public class SubscribeListener implements ApplicationListener<SessionSubscribeEvent> { @Override public void onApplicationEvent(SessionSubscribeEvent event) { System.out.println("正在訂閱消息."); //我們可以從StompHeaderAccessor中拿到很多的信息，比如請求地址，請求類型等 StompHeaderAccessor accessor = StompHeaderAccessor.wrap(event.getMessage()); System.out.println(accessor.getDestination()); ///topic/v1/chat } } @Component public class UnsubscribeListener implements ApplicationListener<SessionUnsubscribeEvent> { @Override public void onApplicationEvent(SessionUnsubscribeEvent sessionUnsubscribeEvent) { System.out.println("已取消訂閱."); } } @Component public class DisconnectListener implements ApplicationListener<SessionDisconnectEvent> { @Override public void onApplicationEvent(SessionDisconnectEvent sessionDisconnectEvent) { System.out.println("已經斷開連接."); } } ``` **2. 前端代碼** 當前端進行不同的操作時，上面的5中監聽器就會相應的被調用。 ```js <script type="text/javascript"> var client = null function connect() { const socket = new SockJS('http://localhost:8083/endpoint-websocket') client = Stomp.over(socket) client.connect({}, (frame) => { console.info('已經建立連接.', frame) }) } function sendWithsubscribe() { client.send('/app/v1/chat', {}, 'Hello World!') client.subscribe('/topic/v1/chat', (res) => { console.info(res.body) }) } function unsubscribe() { client.unsubscribe('/topic/v1/chat') } function disconnect() { client.disconnect() } </script> ```