Web-Socket 공부 흔적(1)

현재 개발하는 프로젝트에 단체톡방 기능을 구현하기 위해서 Web-Socket을 무작정 공부하고있다. 소켓에 대한 선수지식 또한 없고 구글링+레퍼런스를 직접 살펴보면 작성하며 내가 직접적인 주관으로 작성하는 글이며 아직 초심자의 글이기 때문에 덜 다듬어져있고 옳바르지 않은 정보가 포함되어있을 수도 있다.

 

웹소켓이 등장하게된 배경과 웹소켓이전의 기술과 기술원리 그리고 차세대 기술과 관련된 정리는 Git에 TIL형식으로 정리해놓았으니 이 블로그를 찾은 사람에게 참조하면 미약하게나마 도움이될거같다. 

https://github.com/seonghoo1217/TodayILearnd/blob/main/Spring-boot/Web-Socekt/Web-Socket%20%EA%B8%B0%EC%B4%88%EC%A0%95%EB%A6%AC.md

GitHub - seonghoo1217/TodayILearnd: It's seonghoo1217's TIL

현재 웹소켓에 이해가 아예 없었기에 많은 블로그나 레퍼런스 아론님과 코일의 테코톡으로 공부하거나하여 이론을 먼저 다지는게 중요하다고 생각하였다. 그래서 웹소켓의 구조를 최대한 공부하고 현재 개발중인 스프링 프로젝트에 적용을 

시키려했지만 이론만으로는 메서드 같은걸 어느 구조로 어떻게 적용시켜야할지를 알 수가 없었다. 그래서 다양한 블로그를 참조하여 이 글을 작성하여 정리형식으로 이론보다는 나의 개발일지느낌으로 작성하려고한다. 누군가에게 내글이 도움이 되었으면 한다.

 

우선 스프링환경에서 웹소켓 프로그래밍을 하기위한 순서를 생각해보았다.

1. Dependency 추가

2. WebSocket 핸들러 확장구현

3. Configuration(설정) 정의

 

기초적으로 이것만 해놓으면 웹소켓으로 테스트를 할 수 있는 환경은 갖추어져 진것이다.

나와같이 처음 웹소켓을 사용하려는 사람이면 의아할 수도 있다. '분명히 어려운 영역으로 알고 도전을 했을텐데 저게 끝이라고?'생각할 수 있다. 물론 우리가 상상하는 안정적인 상태는 아니지만 적어도 소켓으로 통신은 가능한 상태인것이다.

dependency는 스프링부트환경에서 gradle 프로젝트를 사용하기 때문에 build.gradle에

////////////////////////////WEBSOCKET//////////////////////////////////
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-websocket'
///////////////////////////////////////////////////////////////////////

이걸 추가해준다.

그리고 WebSocket 핸들러 확장구현은 위에서 말했듯이 단체톡방을 구현하기 위함으로 TextWebSocketHandler를 extends해준다.

@Component
@Log4j2
public class ChatHandler extends TextWebSocketHandler {

    private static List<WebSocketSession> sessionList=new ArrayList<>();

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload=message.getPayload();
        log.info("payload={}",payload);

        for (WebSocketSession sessions:sessionList){
            sessions.sendMessage(message);
        }
    }

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessionList.add(session);
        log.info("session에 클라이언트입장={}",session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        log.info("session에서 클라이언트퇴장={}",session);
        sessionList.remove(session);
    }
}

handler를 Bean에 등록해준다. 여기서 handleTextMessage는 문자열 메시지를 전달할것이기 때문에 Override해주었고 메시지를 payload라는 변수에 담아 보낸다 여기서 payload란 헤더와 메타데이터 에러같은 데이터를 통칭하는것이다.

afterConnectionEstablished 와 afterConnectionClosed는 각각 세션에 클라이언트가 들어왔을때와 나갔을때다.

 

이제 Configuration을 통하여 클라이언트와 연결한 Url경로를 설정해준다.

 

@Configuration
@RequiredArgsConstructor
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    private final ChatHandler chatHandler;


    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatHandler,"ws/chat").setAllowedOrigins("*");
    }
}

 

handler를 추가해주고 경로를 지정해준다. /chat으로 EndPoint를 설정하고 도메인이 다른 서버에서도 접속가능하게 

CORS정책에 따라 setAllowedOrigins("*");를 추가해준다. 이제 클라이언트는 ws://localhost:8080/chat URL로 커넥션을 연결하고 통신이가능해진다.