학원/Spring

28_웹소켓

행수쌤 2023. 4. 30. 17:30
728x90
반응형

웹소켓 서버 준비

    - WebSocketServer Class 생성, TextWebSocketHandler extends

        - afterConnectionEstablished Override : 연결 후 실행 메소드

        - afterConnectionClosed Override : 연결 종료 후 실행 메소드

        - HandleTextMessage Override : 세션과 메세지객체를 전달받아 처리하는 메소드

    - 서버 Configuration Class 생성 후 @EnableWebSocket 선언, implements WebSocketConfigurer

        - registerWebSocketHandlers Override

        - 사용할 웹소켓 서버 registry에 등록(ws 주소, HttpSession 정보 처리, SockJS 사용 여부 등 추가)

 

JS에서 웹소켓 사용 준비

    - url 지정 후 웹소켓 객체에 저장

        - jQuery : window.socket = new SockJS(url); 최상위 window객체에 저장 후 활용

        - Vue : this.socket = new SockJS(url); data필드에 선언 후 사용

    - 웹소켓 객체 이벤트 재정의

        - onopen(연결됐을때), onclose(닫혔을때), onerror(에러났을때), onmessage(메세지왔을때)

window.socket.onopen = function(){
    changeToConnect();
};

JS에서 데이터 전송 및 수신

//수신
window.socket.onmessage=function(e){
    $("<p>").text(e.data).appendTo(".message-wrapper");
};
//발신
window.socket.send(data);

 

Json 통신 아키텍쳐
      -> 서버 등록 시 HttpSession 정보를 WebSocketSession에 추가 

            - .addInterceptors(new HttpSessionHandshakeInterceptor())

      -> 브라우저에서 메세지를 Json 에서 String으로 변환 후 서버로 전송  JSON.stringify(data)
      -> 웹소켓 서버의 handleTextMessage 메소드에서 전송받음(session, message)

      -> Map으로 WebSocketSession session 정보 반환  Map<String, Object> attr = session.getAttributes();

            - WebSocket SessionID, HttpSession을 연결했다면 HttpSession 데이터 포함

      -> ObjectMapper 객체 생성, mapper이용해서 VO에 TextMessage에 있는 Payload 데이터 반환 

           - message.getPayload()에 JSON 정보 문자열로 전송되므로, mapper로 객체(VO)에 입력

      -> session을 Map으로 변환 및 데이터 가공 
      -> session 정보를 VO에 추가해서 보낼 데이터 정리 

      -> mapper.writeValueAsString(vo); 으로 보낼 객체(VO) String으로 변환
      -> TextMessage 객체에  String 첨부, 생성하여 보낼 수 있는 상태로 만들어줌

      -> WebSocketSession 객체에 .sendMessage(TextMessage)로 브라우저에 전송 

      -> 서버에서 받은 String을 Json으로 parse 후 데이터 사용  const data = JSON.parse(e.data);

728x90
반응형