Spring Boot - WebSocket

이번 글은 Web Socket 에 대한 글 입니다.

STOMP 메시징와 Spring 을 사용하여 대화형 웹을 만들 것 입니다.

STOMP 란 ?

- 이전 TTMP로 알려진 간단한 (또는 스트리밍) 텍스트 지향 메시지 프로토콜 (STOMP)는, 메시지 지향 미들웨어 (MOM) 작업을 위해 디자인 된 간단한 텍스트 기반 프로토콜입니다. 그것은 STOMP 클라이언트가 프로토콜을 지원하는 모든 메시지 브로커와 이야기 할 수있는 상호 운용 와이어 형식을 제공합니다. 그것은 다른 언어로 개발 한 클라이언트 소프트웨어에서 통신을 수신 할 수있는 하나의 프로그래밍 언어 나 플랫폼 용으로 개발 된 브로커를 의미, 따라서 언어 불가 지론이다.

1. Gradle 설정

2. Model 설정

3. Controller 설정

4. Config 설정

5. View 작업

6. Script 작업(Jquery)

7. 결과

---

1. Gradle 설정

- websocket 에 대한 라이브러리 추가와 함께 웹 라이브러리 관리를 위한  디펜던시를 추가해줍니다.

dependencies {
	compile('org.projectlombok:lombok')
	compile("org.springframework.boot:spring-boot-starter-websocket")
	compile("org.webjars:webjars-locator")
	compile("org.webjars:sockjs-client:1.0.2")
	compile("org.webjars:stomp-websocket:2.3.3")
	compile("org.webjars:bootstrap:3.3.7")
	compile("org.webjars:jquery:3.1.0")

	testCompile("org.springframework.boot:spring-boot-starter-test")
} 

2. Model 설정

3. Controller 설정

- 기존 봐왔던 Controller 의 Mapping 이 다르게 되어 있습니다.

- @MessageMapping : 메시지가 목적지로 전송하는 경우 해당 메소드를 실행 해줍니다.

- @SendTo : 메소드에서반환된 객체를 모든 가입자(유저)에게 방송 합니다.

- Spring Boot WebSocket 가이드 문서와는 조금 달리 진짜 채팅처럼 구현 하고자, 입장, 퇴장, 채팅에 대한 맵핑을 해놨습니다.

4. Config 설정

  - WebSocket에 대한 설정 작업 입니다.

- @EnableWebSocketMessageBroker : 메시지 중개인에 의해 웹 소켓 메시지 처리를 할 수 있습니다.

- configureMessageBroker : 메시지 중개인의 구성인 WebSocketMessageBrokerConfigurer의  메소드들을 재정의 하기 위한 것이다.

- registerStompEndpoints : SockJS 에서 접속을 시도할 수 있게 해줍니다.

5. View 작업

- 필요 부분만 캡처했습니다. (Github 참고)

- 부트스트랩 무료 테마의 일부분을 참고하여 UI를 수정하였습니다.

- 22 Line : connect 해주는 부분

- 23 Line : disConnect 해주는 부분

- 32 Line : 이름 입력 부분

- 48 Line : 채팅이 보여지는 부분

- 55~60 Line : 메시지 내용과 보내는 부분

6.  Script 작업(Jquery)

- 간단하게 플로우만 적어보겠습니다. (C : 클라이언트 1 , S : 서버, Cs : 모든 클라이언트)

: 소켓 연결 -> 입장 메시지 전달(C) -> 방송(S) ->  구독(Cs)

-> 채팅(C) -> 방송(S) -> 구독(Cs) -> 퇴장 메시지 전달(C) -> 방송(S) -> 구독(Cs)

② 소켓 연결 끊음

③ 메시지 전달

④ 구독한 데이터 표현

7. 결과