[Spring] 스프링 웹 소켓이란? 웹 소켓으로 간단한 채팅 만들기 Web Socket

WEB Socket

• HTTP 통신의 단점을 개선하기 위함
• • 일방향 통신
• 웹 소켓은 반 영구적 양방향 통신
• • 연결이 끊어지지 않고 지속됨
  • 온라인 게임이 소켓 프로그래밍의 일종
• HTML5의 주요 API
• HTTP Protocol을 기반으로 하는 웹 브라우저와 웹 서버 간의 양방향 통신을 지원하기 위한 표준
• Client와 Server가 실시간으로 메시지를 자유롭게 주고 받을 수 있음

# HTTP 4 기술 (Socket 전)

• Apache Comet
• • Polling
  • • 계속 문의하는 것
    • Client가 Server에 요청을 하면 응답을 하고 받자마자 요청한다
    • 위의 과정을 계속 반복한다 브라우저 종료시 까지
    • 서버에 부담이 많이 가게 된다
  • Long Polling
  • • 폴링의 단점을 개선한 것
    • 요청을 하면 Server는 새로운게 있을 때 까지 응답을 하지 않고 무한정 대기 (Thread 이용)
    • 새로운 데이터가 발생했다면 응답
    • Client는 응답을 받자마자 재 요청 하는 것은 동일하다
    • 폴링보다 텀이 길기 때문에 서버의 부담을 줄여줄 수 있다

# WEB Socket 원리

Client1     Client2     Client3

            Server

        (Socket Handler)

Client들이 채팅을 하기 위해 서버를 접속 할 때 Server의 Socket Handler (Session)에는 Client의 정보가 등록이 된다

등록이 되게 되면 총 4가지의 이벤트가 있다 이벤트들을 이용해서 많은 기능들을 지원할 수 있다

• Open
• • 접속
• Close
• • 접속 종료
• Send
• • 메시지 전송 Client -> Server
• Emit
• • 메시지 전송 Server -> Client

접속과 동시에 Open이 기능을 수행한 것이고 Client1이 Server에게 Send("ABC")를 전송 했다

그렇다면 Server는 Client2와 Client3에게 Emit("ABC")를 보냄으로 써 메시지를 전달 받는다

Client3이 Close를 했다면 Server가 나머지 Client들에게 Client3의 접속 종료를 알린다

채팅에서 보면 남들이 보낸 메시지는 Emit을 통해 보여지게 되고 내가 보낸 메시지는 Send를 이용한 것이다

서버는 단순히 중계 역할을 한다 그래서 중계자 혹은 브로커라고도 부른다

# WEB Socket 설정

spring-websocket을 추가해줘야 한다

pom.xml에서 추가를 한다

그런 후 sockjs.org로 접속을 해서 필요한 파일을 다운 받는다

 을 눌러서 다운받아 압축을 푼다

그런다면 dist 폴더가 있는데 그 안에 js 파일이 존재한다

  

WEB-INF 안에 resources 폴더를 생성하고 그 안에 js 폴더를 만들어서 jQuery와 sockjs-1.0.3.min.js를 추가한다

그런 후 applicationContext.xml에서 resources를 추가하는 구문을 생성한다

우선 handler 패키지에서 클래스를 생성하고 TextWebSocketHandler를 상속받는다

그리고 나서 Event들을 처리할 수 있는 Method들을 선언한다

그런 후 로그를 남기기 위해서 Logger 변수를 추가해서 로그를 남긴다

그리고 사용자를 관리할 수 있게 만들기 위해서 List를 생성한다

추가를 했으면 접속을 담당하는 이벤트 메소드에 세션을 추가하는 구문을 추가한다

그리고 종료를 담당하는 이벤트 메소드에도 로그를 남겨준다

이제는 handleTextMessage 즉 Send와 Emit을 관리하는 메소드를 작성한다

payload는 사용자가 보낸 메시지 이고 자기가 보낸 메시지를 받을 필요 없으니 조건문으로 걸러준다

이제는 WEB-INF/sping 폴더내에 ws-config.xml 파일을 생성해서 websocket을 추가해준다

그리고 아래와 같이 세팅을 작성한다

이제 web.xml에서 springDispatcheServlet에서 추가를 한다

그런 후 서버를 가동 시켜 본다 접속 후에 echo-ws로 접속을 하면 다음과 같이 출력이 되면 잘 설정이 된 것이다

# Client 생성

Controller를 생성하기 위해서 handler 패키지 내에 socket.web 패키지를 생성한다

이후에 appllicationContext.xml에서 bean으로 등록을 해주면 된다

그런 후 chat.jsp를 생성한다

/chat으로 접근하면 jsp파일이 정상적을 보이는 것을 볼 수 있다

그리고 jsp에서 아까 추가한 js들을 가져오고 테스트를 해본다

정상적으로 alert 되는걸 볼 수 있다

그리고 버튼을 하나 주어 클릭 시 메시지를 보내고 싶다면 아래와 같이 생성한다

메시지를 보낸 사람이 누군지를 알기 위해서 EchoHandler에서 수정을 한다

Send와 Emit을 처리하는 구문에서 누가 보냈는지를 추가해준다

이제 채팅 기능을 만들기 위해서 input을 만들고 채팅을 시현해본다

아래와 같은 실시간 채팅을 볼 수 있다

# 귓속말

gson과 json을 사용하기 위해서 json.js를 추가한 후 pom.xml에서 gson을 검색해서 추가한다

gson은 json으로 받아온 데이터를 객체로 넘기는 것이다

그리고 jQuery 부분에서 var message를 생성한다

귓속말할 대상을 선택하기 위해서 input 타입을 준다

위와 같이 적으면 JSON으로 바뀌어서 전달이 되게 된다

또한 밑에 sendMessage를 클릭 했을 때 이벤트에서 추가를 해준다

콘솔창에 보면 JSON 타입으로 보낸 것을 볼 수 있다

받을 객체를 생성해야 하므로 handler/socket 패키지 내에 vo 패키지를 생성하고

변수들을 선언한다

그런 후 convertMessage라는 메소드를 생성해서 gson으로 객체를 받아서 리턴시켜주는 역할을 정의한다

그리고 나서 EchoHandler.java에서 객체 선언 후 수정 한다