0809 - 0815

0809 - Spring Web Socket

WebSocket

• 레퍼런스에 따르면, websocket은 웹 브라우저(클라이언트)와 서버간의 full-duplex(양방향), bi-directional(전이중적), persistent connection(지속적인 연결)의 특징을 갖는 프로토콜이라고 규정한다.

• Websocket과 TCP의 차이

  1. 웹소켓은 연결 요청에 대해 http를 통해 switching 및 Handshaking이 이루어진다.
  2. TCP는 Binary 데이터만 주고 받을 수 있지만, Websocket은 Binary 데이터 뿐만 아니라 Text 데이터를 주고 받을 수 있다.

=> Websocket은 HTTP와 TCP의 특성을 섞어 놓은 프로토콜이며, 웹 브라우저 환경에서 연결지향 통신을 하기 위한 기술이다.

Spring WebSocket

스프링에서는 2가지 방식으로 웹소켓을 구현 할 수 있다.

• WebSocket 데이터를 직접 처리
• Stomp 프로토콜을 사용하여 메세징 처리

1) Websocket Data 직접 처리

Config를 통해 Websocket 옵션 설정 가능. 웹소켓 핸들러를 상속받은 클래스는 low level 수준에서 원시적으로 데이터를 처리할 수 있으며, 다음과 같은 4가지 이벤트를 처리 할 수 있다.

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
//        WebSocket을 사용할 수없는 경우 대체 전송을 사용할 수 있도록 SockJS 폴백 옵션을 활성화합니다.
//        SockJS 클라이언트는 "/ws"에 연결하여 사용 가능한 최상의 전송 (websocket, xhr-streaming, xhr-polling 등)을 시도.
        registry.addHandler(new WsTranportHandler(), "/ws").setAllowedOrigins("*").withSockJS();
    }
}

@Component
public class WsTranportHandler extends TextWebSocketHandler {
 
    // connection이 맺어진 후 실행된다
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.err.println("session connected +=" + session);
    }
    // 메세지 수신
    @Override
    public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
        System.err.println("handle message +=" + session) + ", message=" + message);
 
        //echo Message
        session.sendMessage(message);
 
    }
    // transport 중 error
    @Override
    public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
        System.err.println("transport error =" + session +", exception =" + exception);
    }
    // connection close
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
 
        System.err.println("session close -=" + session);
 
    }
}

=> 세션레벨에서 데이터를 Handle

2) Stomp 프로토콜을 사용하여 메세징 처리

STOMP 프로토콜은 simple text oriented messaging protocol의 약자이며, 텍스트 기반의 프로토콜이다.

Spring 내부의 In Memory Broker를 통해 메세지를 처리한다.

1. Receive Client
   • 메세지를 받기 위해 특정 토픽이 사전에 서버에 subscribe 되어야 한다.
2. Send Client
   • 서버와 연결된 클라이언트는 특정 path로 ex) /app/message 전달한다.
3. Broker
   • 메세지 브로커는 Kafka, RabbitMQ, ActiveMQ 등의 오픈소스들 처럼 MQ이며, pub/sub 모델을 따른다. 토픽에 따라 메세지를 전달해야 하는 사용자를 구분하다.
   • 연결된 클라이언트의 세션을 관리한다.
   • 특정 토픽과 메세지를 Mpaaping 하여, 토픽을 구독하는 세션에 존재하는 클라이언트에게 메세지를 전달한다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketStompConfig implements WebSocketMessageBrokerConfigurer {
 
    //messageBroker config
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
 
        //in-memory message-broker, topic에 대한 prefix 설정
         config.enableSimpleBroker("/topic");
 
 
        //메세지를 수신하는 handler의 메세지 prefix 설정 
        config.setApplicationDestinationPrefixes("/api");
 
    };
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
       registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
    }
}

@RestController
public class MessageHandleController {
 
    @MessageMapping("/echo")
    @SendTo("/topic/messages")
    public EchoMessage echo(String message) throws Exception {
        System.err.println(message);
        return  new EchoMessage(message,LocalDateTime.now());
    }
}

• @MessageMapping으로 MessageHandle을 한다. 설정의 setApplicationDestinationPrefix를 /api로 설정했기 때문에, 최종적으로 메세지를 보내려고 할 경우 /api/echo 로 메세지 보낸다면, MessageHandler는 메세지를 수신한다.

• @MeesageMapping을 통해 메세지를 수신했다면, @SendTo를 통해 특정 토픽을 구독하는 클라이언트에게 메세지를 보낼 수 있다.

0812 - 디자인패턴 : 생성, 구조, 행위 패턴

생성 패턴

객체의 생성과 참조 과정을 캡슐화하여 객체가 생성되거나 변경되어도 프로그램 구조에 영향을 크게 받지 않도록 하여 프로그램에 유연성을 더해주는 패턴

구조 패턴

클래스/객체들을 조합하여 더 큰 구조로 만들 수 있게 해주는 패턴. 예를 들어 서로 다른 인터페이스를 지닌 2개의 객체를 묶어 단일 인터페이스를 제공하거나 서로 다른 객체들을 묶어 새로운 기능을 제공하는 패턴.

행위 패턴

객체나 클래스 사이의 알고리즘이나 책임 분배에 관련된 패턴. 한 객체가 혼자 수행할 수 없는 작업을 여러개의 객체로 어떻게 분배하는지, 또 그렇게 하면서도 객체 사이의 결합도를 최소화 하는 것에 중점을 두는 방식

0813 - 쓰로틀링과 디바운싱

• 디바운싱은 주로 ajax 검색에 주로 사용. 쓰로틀링은 스크롤을 올리거나 내릴 때 보통 사용.
• underscore나 lodash에서 지원 하는 기능(라이브러리 사용시 따로 구현 X)
  • underscore : _.debounce, _.throttle

쓰로틀링

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

• 구현 예제

var timer;
document.querySelector('#input').addEventListener('input', function (e) {
  if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      console.log('여기에 ajax 요청', e.target.value);
    }, 200);
  }
});

디바운싱

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

// html
<input id="input" />

// script
document.querySelector('#input').addEventListener('input', function(e) {
  console.log('여기에 ajax 요청', e.target.value);
});

• 요청 낭비 => 이벤트 발생 마다 타이머를 성정

var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('여기에 ajax 요청', e.target.value);
  }, 200);
});

• 디바운싱 구현

0814 - @ModelAttribute, @RequestParam, @RequestBody

@ModelAttribute

• multipart/form-data 형태의 HTTP Body 내용과 HTTP 파라미터들을 Setter를 통해 1대1로 객체 바인딩
• Json이나 XML과 같은 형태의 데이터를 MessageConverter를 통해 변환 시키는 @RequestBody와 달리, multipart/form-data 형태의 HTTP Body와 HTTP 파라미터들을 매핑시킨다는 차이

@RequestParam

• 1개의 HTTP요청 파라미터를 받기 위해서 사용
• 기본적으로 반드시 해당 파라미터가 전송되어야 한다 (기본이 true) SS

RequestBody

• Json(application/json) 형태의 HTTP Body 내용을 Java Object로 변환시켜주는 역할
• Body가 존재하지 않는 Get 메소드에서는 사용 불가
• MessageConverter들 중 하나인 MappingJackson2HttpMessageConverte를 통해 Java 객체로 변환

0815 - jackson, gson

jackson과 gson 모두 Java에 대한 JSON 데이터 바인딩을 지원하는 라이브러리이다.

직렬화, serializing, marchal : java 객체 -> json
역직렬화, deserializing, umarshal : json -> java 객체

jackson

Json 뿐만 아니라 XML과 YAML 도 지원하는 라이브러리다. 속도가 빠르고 유연하며 고용량의 JSON 데이터 처리 성능도 탁월.

• 직렬화

ObjectMapper mapper = new ObjectMapper(); 
String jsonResult = mapper.writeValueAsString(json으로 바꾸고싶은 java객체);

• 역직렬화

String jsonInput = "json 데이터";
ObjectMapper mapper = new ObjectMapper();
Example exam = mapper.readValue(jsonInput, Example.class);

gson

비교적 가벼우며 메이븐 저장소도 지원한다.

• 직렬화

String jsonResult = new Gson().toJson(json으로 바꾸고싶은 java객체);

• 역직렬화

String jsonInput = "json 데이터";
Example exam = new Gson().fromJson(jsonInput, Example.class);