SockJS, STOMP.JS 사용방법

클라이언트 생성

stompJS와 sockJS의 객체를 사용할 파일을 생성하고, 사용할 객체를 다음과 같이 해당 라이브러리에서 import 및 require한다.

import SockJS from 'sockjs-client'
const Stomp = require('stompjs');

그리고 stomp 프로토콜 위에서 sockJS가 작동되도록 클라이언트를 생성한다.

let stomp_client

function connection {
  let socket = new SockJS(연결할 uri);
  stomp_client = Stomp.over(socket);
  // ...
}

//...

sockJS의 인자로 연결할 프로토콜의 URI를 입력해주고 임의의 변수에 할당한다.
그리고 stomp 프로토콜 위에 sockJS가 돌아가도록 Stomp.over()의 인자로 방금 만든 socket이라는 변수를 넣어준다.
이제부터는 상황에 따라 stomp_client라는 변수에 서버 연결, 메시지 전송, 상대방 구독 관련값을 추가 할당하기에 자주 사용하게 될 것이다.

서버 연결

이제 서버에 연결하기 위해 서버에 CONNECT 프레임을 전송해야 한다. 프레임이란 명령어, 선택사항인 헤더 집합, 선택사항인 바디로 구성되어 있으며, 이 프레임이라는 것을 클라이언트와 주고받음으로써 통신을 실시간으로 상호작용을 할 수 있다.

//...
stomp_client.connect({}, function() {
  // ...
})
// ...

구독

상대방에게 메시지를 보내거나 받아야 할 경우 특정 URI에 대해 구독해야 한다. 만약 특정 URL을 구독한다면 상대방이 해당 URL을 구독하고 메시지를 보내면 해당 메시지를 받을 수 있게 된다.
실제 예로 특정 채팅방에 입장하면 해당 채팅방으로부터 전송되는 메시지를 수신할 수 있도록 SUBSCRIBE 프레임을 날린다.

stomp_client.subscribe(`/join/room/1`, function (frame) {
  // ...
}, {/*구독 시작시 실행될 콜백 함수*/})
// ...

구독 끊기

만약 특정 채팅방에서 나가거나 해당 어플리케이션에서 나갔을 경우 상대방이 보낸 메시지를 읽지 않음으로 표시하기 위해 구독을 끊어준다.
이 구독을 끊는다는 것은 서버와의 연결을 끊는 것이 아닌 특정 메시지의 SEND 프레임을 수신하지 않겠다는 것을 의미한다.

stomp_client.subscribe(`/join/room/1`, function (frame) {
  // ...
}, {}),unsubscribe()
/...

위 코드는 채팅방 1번을 나갈 때 구독을 끊는다는 의미이다.

메시지 전송

메시지를 전송할 때는 SEND프레임을 전송해야 한다.

const message = {
  key : value
}
stomp_client.send("/message", {}, JSON.stringify(message))
// ...

send()의 첫번째 인자는 해당 프레임을 전송할 때 필요한 URI를 입력한다.
두번째 인자는 해당 프레임을 전송할 때 헤더를 설정하는 곳이다.
세번째 인자는 해당 프레임을 전송할 때 보낼 데이터를 설정하는 body이며, 이 부분에 상대방에게 보내고 싶은 메시지가 들어간다.
이 경우 JSON 형태로 데이터를 보내는 것을 예시 코드로 작성한 것이다. 해당 key와 그에 대한 value는 서버 개발자가 지정한 양식에 따라 입력해야 할 데이터를 넣어주면 된다.

서버 연결 끊기

// ...
stomp_client.disconnect();
// ...

웹소켓 연결을 끊기 위해서는 Stomp.over()를 할당한 변수에 disconnect()로 체이닝한다.

프레임을 개발자 도구에서 숨기기

프레임이 개발자 도구에 노출됨으로써 프레임에 포함되는 헤더, 데이터, 바디도 같이 노출된다. 이러한 프레임을 개발자 도구에서 숨기기 위해서는 다음과 같이 코드를 추가해주어야 한다.

// ...
stomp_client.debug = null
// ...