websocket( + STOMP)를 온라인에서 디버그하자

박재한·2023년 1월 20일
0

스프링 웹소켓으로 채팅 시스템을 개발하는것을 알아보고 구현하는 중에 웹소켓을 테스트하는 방법을 알아봤다.

구글 크롬에 익스텐션으로 websocket을 검색하면 몇 개의 익스텐션이 나오는데, 걔넬 사용해도 된다.
STOMP는 크롬 익스텐션으로 해결이 되지 않아서 찾아보던 중, 어떤 개발자가 간단한 테스트용 사이트를 개발한 것을 확인했다.

http://jxy.me/websocket-debug-tool/

요긴데,

이런식으로 웹소켓을 사용할 수 있게 되어있다.
STOMP로 접속 시 STOMP 체크박스에 체크하고 접속하면 된다.

주의할 점

오픈소스 코드긴 한데, 저 사이트 자체는 온라인으로 되어있는 사이트다 보니 정보 노출이 될 수 있다. 기왕이면 로컬 서버만 테스트하자.
사이트 우상단에 github 링크가 있어 로컬에서 다운로드 후 npm 설치 등의 과정을 거쳐 저걸 로컬에서 돌릴 수 있다고는 한다.

STOMP(redis) pub/sub 서비스 테스트

STOMP pub/sub 서비스를 테스트하는 방법은 다음과 같다.
서버가 돌아간다고 가정하고 실험하겠다.

웹소켓 url을 작성 뒤 STOMP에 체크하고 connect를 누른다.

접속 시 오류가 나지 않으면 아래와 같이 info가 뜬다

subscribe 테스트

subscribe 원하는 경로를 입력 후 subscribe 시 문제가 없다면 info가 뜬다.

publisher가 메시지를 잘 보냈다면, 아래와 같이 STOMP frame 형식으로 헤더(노랑색 형광펜)와 message(파랑색 형광펜)이 잘 나타난다.

publish 테스트

메시지를 받는 경로인 prefix /pub뒤에 messageMapping으로 매핑하는 주소 /chatting-service를 붙여 경로를 입력 후 아래에 메시지를 보내면 된다. 내부적으로 VO 객체를 Json으로 해석해 메시지를 받고 sub로 보내기 때문에 json형태로 메시지를 구성하면 된다.

  • VO 객체 형태(예시)
  • 메시지 내용:
{"roomId": "exampletopic", "sender": "gildong", "message": "hello"} 

내부에서 roomId를 가지고 topic를 구분해 sub의 주소를 알아내기 때문에 exampletopic이라는 roomId를 주었다.

send를 눌렀을 때 오류가 없다면 info가 뜬다.

0개의 댓글