[WebSocket] 독학 1일차

·2023년 2월 19일
0

독학

목록 보기
1/4

프로젝트에서 실시간 기능을 구현해야 하는 일이 생겼는데
학원에서 배운적이 없어 독학을 해보려고 한다.
원래는 nodejs를 통해서 Socketio를 독학했었는데, Spring 백엔드와 연동하는게 생각보다 복잡하고 어려워서 SpringBoot기반으로 다시 학습을 진행해보려고 한다.

🌿학습 해야할 내용

실시간 연결: Websocket, SockJS(Websocket의 한계를 극복)

실시간 메세지 주고 받기: STOMP

미디어 스트리밍 기술: WebRTC

WebRTC를 지원하는 JavaScript 라이브러리 : PeerJS(P2P일때만 사용)

WebRTC를 지원하는 SpringBoot 라이브러리 : Kurento(적합)


🌿SpringBoot에서의 WebSocket 사용방법

결과적으로 WebSocketHandler를 구현해서 연결을 시켜야 한다.

🌱pom.xml에 의존성 추가

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

🌱예시코드(chatGpt)

  • 인터페이스 구현 예시
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/my-handler");
    }
    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }
}
  • 핸들러 예시
public class MyHandler implements WebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 클라이언트와 연결이 성공적으로 이루어지면 호출되는 메서드
    }

    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        // 클라이언트로부터 메시지가 도착하면 호출되는 메서드
    }

    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        // 에러가 발생하면 호출되는 메서드
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
        // 클라이언트와 연결이 종료되면 호출되는 메서드
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }
}
  • 클라이언트 예시
var socket = new WebSocket("ws://localhost:8080/my-handler");

socket.onopen = function() {
    console.log("WebSocket 연결이 열렸습니다.");
};

socket.on
  • Websocket에서 수신된 메세지를 처리함
socket.onmessage = function(event) {
    console.log("서버에서 메시지를 수신했습니다: " + event.data);
};

🌱코드 분석

🌼WebSocketConfigurer 인터페이스

  • WebSocket을 구성하는 방법을 정의하는 인터페이스

  • @EnableWebSocket: Spring Framework에서 WebSocket을 사용하기 위해 설정 클래스에 지정하는 어노테이션

    • 메소드: configureWebSocketTransport(WebSocketHandlerRegistry registry)

    • 파라미터 WebSocketHandlerRegistry: WebSocket 핸들러를 등록하게 해주는 클래스

    • .addHandler([WebSocketHandler 구현객체], [WebSocket을 받을 url]);

      • url은 클라이언트가 WebSocket 연결을 요청할 때 사용될 URL과 일치
      • WebSocketHandler 인터페이스를 구현한 객체는 Bean으로 등록되어 있어야 함

🌼 WebSocketHandler 구현한 핸들러

  • 메소드

    • afterConnectionEstablished(WebSocketSession session)
      -> 클라이언트와 연결이 성공적으로 이루어지면 호출되는 메서드
    • handleMessage(WebSocketSession session, WebSocketMessage<?> message)
      -> 클라이언트로부터 메시지가 도착하면 호출되는 메서드
    • handleTransportError(WebSocketSession session, Throwable exception)
      -> 에러가 발생하면 호출되는 메서드
    • afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus)
      -> 클라이언트와 연결이 종료되면 호출되는 메서드
    • supportsPartialMessages()
      -> boolean타입. 메세지의 길이가 긴 경우 수신을 처리할 수 있는지 없는지 판단하는 메소드

🌼JavaScript 클라이언트

  • new WebSocket([통신주소])
    -> 서버와의 연결을 열어줌
  • .onopen
    -> 연결이 됐을때 콜백함수 호출
  • socket.on
    -> WebSocket 객체에서 수신된 메시지를 처리하는 이벤트 핸들러 함수를 등록
    -> 이벤트 핸들러 함수 등록 필수
profile
웹개발입문자

0개의 댓글