new StompJs.Client( )

 

new StompJs.Client()

const stompClient = new StompJs.Client({
    brokerURL: 'ws://localhost:8080/gs-guide-websocket'
});

STOMP( Simple Text Oriented Messaging Protocol )를 사용하여 WebSocket을 통해 메시지를 주고받을 수 있도록 해주는 JavaScript클라이언트

 

brokerURL : WebSocket서버의 주소 설정

 

이벤트 핸들러
onConnect	연결 성공 시 실행할 함수
onDisconnect	연결 종료 시 실행할 함수
onWebSocketError	WebSocket 오류 처리
onStompError	STOMP 프로토콜 오류 처리

 

메서드
activate():	WebSocket 연결 시작
deactivate():	WebSocket 연결 종료
subscribe(destination, callback):	메시지 구독
publish({ destination, body }):	메시지 전송

 

 

STOMP클라이언트를 사용하여 특정 채널?Topic?을 구독( subscribe ), 수신된 데이터를 처리

stompClient.subscribe('/topic/greetings', (greeting) => {
    alert(JSON.parse(greeting.body).content); 
});

STOMP클라이언트의 subscribe메소드 설명
서버가 /topic/greetings채널로 메시지를 보내면 콜백 함수가 실행됨
greeting.body	수신한 메시지의 본문(body) 데이터를 의미, 메시지는 일반적으로 JSON 형식
JSON.parse(greeting.body)	메시지 본문을 JSON 객체로 변환 예: {"content": "Hello, world!"} → { content: "Hello, world!" }
JSON.parse(greeting.body).content	JSON객체의 content 값을 추출

 

 

STOMP클라이언트로 WebSocket을 통해 특정 목적지(destination)로 메시지 전송

stompClient.publish({
    destination: "/app/hello",
    body: JSON.stringify({'name': $("#name").val()})
});

stompClient.publish({...})	STOMP서버로 메시지를 전송( publish )하는 메서드 destination( 목적지 )와 body( 메시지 내용 )를 포함
destination: "/app/hello"	메시지를 전송할 STOMP엔드포인트 Spring WebSocket 컨트롤러의 매핑과 연결
body: JSON.stringify( ~ )	전송할 데이터를 JSON형식의 문자열로 변환 예) {"name": "John"}

 

<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.0/bundles/stomp.umd.min.js"></script>

STOMP.js 라이브러리를 CDN에서 불러오는 코드

이를 통해 WebSocket을 활용하여 STOMP 프로토콜 기반의 실시간 메시징 기능을 구현할 수 있다.

 

CDN( Content Delivery Network )

stomp.umd.min.js는 UMD( Universal Module Definition )형식으로 빌드된 압축된(minified) 버전