1101

ObjectMapper 

객체 -> JSON

JSON -> 객체 로 형변환 해주는 클래스 

 

 

템플릿엔진: 무스타치

model.addAttribute("Dto", 데이터)

 

model 로 넘겨준 값 

.html 에서 {{데이터}} 로 받음

  

sb3 세션이 있을 때 표현

{{#sb3}}

{{/sb3}}

 

sb3 세션이 없을 때 표현

{{^sb3}}

{{/sb3}}

 

 

• String msg = this.objectMapper.writeValueAsString(chatMessageDto.getMessage());
  • 객체 -> String 변환
• TextMessage tm = new TextMessage(chatMessageDto.getMessage());
  • 보낼 메시지 맵핑
• @Validated
  • 유효성 검사

chatroomdetail.html


let chatUrl = "ws://localhost:8077/ws/chat";
let webSocket = new WebSocket(chatUrl);

webSocket.onopen = function (param) {
    let message = $("#message").val();
    let writer = $("#writer").val();
    let chatMessageDto = {
        "msgType": "ENTER"
        , "roomId": "{{chatRoomDto.roomId}}"
        , "writer": writer
        , "message": ""
    };
    webSocket.send(JSON.stringify(chatMessageDto));
}

registerWebSocketHandlers.java


@Configuration
@EnableWebSocket
@RequiredArgsConstructor

// 웹소켓 구성 ( 웹소켓 초기설정 )
public class WebSocketConfiguration implements WebSocketConfigurer {
    private final WebSocketHandler webSocketHandler;

    // WebSocket 핸들러 등록 부분
    // 매개변수: (WebSocketHandlerRegistry:  WebSocket 경로와 핸들러를 설정)
    // .setAllowedOrigins("*"): "*"로 설정하면 모든 출처에서의 WebSocket 요청을 허용
    // .setAllowedOriginPatterns("*"): Spring 5.3부터 추가된 메서드로, 더 유연한 출처 설정을 위해 사용
    // /ws/chat 경로로 들어오는 WebSocket 연결 요청을 처리하는 메소드
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler, "/ws/chat")
                .setAllowedOrigins("*")
                .setAllowedOriginPatterns("*");
    }
}

ChatWebSocketHandler.java



@Slf4j
@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {
    @Autowired
    private ChatRoomService chatRoomService;

    @Autowired
    private ObjectMapper objectMapper;

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        try {
            String payload = message.getPayload();
            ChatMessageDto chatMessageDto = objectMapper.readValue(payload, ChatMessageDto.class);

            ChatRoomDto byRoomId = this.chatRoomService.findByRoomId(chatMessageDto.getRoomId());

            List<WebSocketSession> sessionList = byRoomId.getSessionList();

            if (chatMessageDto.getMsgType() == ChatMessageDto.ChatMessageType.ENTER) {
                sessionList.add(session);
                chatMessageDto.setMessage("입장");
                this.sendMessageSessionsInRoom(chatMessageDto, sessionList);
            } else if (chatMessageDto.getMsgType() == ChatMessageDto.ChatMessageType.OUT) {
                sessionList.remove(session);
                chatMessageDto.setMessage("퇴장");
                this.sendMessageSessionsInRoom(chatMessageDto, sessionList);
            } else if (chatMessageDto.getMsgType() == ChatMessageDto.ChatMessageType.MESSAGE) {
                this.sendMessageSessionsInRoom(chatMessageDto, sessionList);
            }

        } catch (Exception ex) {
            log.error(ex.toString());
        }
    }

    private void sendMessageSessionsInRoom(ChatMessageDto chatMessageDto, List<WebSocketSession> sessionList) throws IOException {
        // 객체 -> String 변환
        String msg = this.objectMapper.writeValueAsString(chatMessageDto);

        // 보낼 메시지 맵핑
        TextMessage tm = new TextMessage(msg);

        for (WebSocketSession webSocketSession : sessionList) {
            try {
                webSocketSession.sendMessage(tm);
            } catch (IOException e) {
                log.error(e.toString());
            }
        }
    }
}

• chatMessageDto
  • msgType
    • 타입, 값을 어떻게 처리할지를 나누기 위한 타입
  • roomId
    • 채팅방 식별자
  • writer
    • 글쓴이
  • message
    • 보낼 채팅

• let chatUrl = "ws://localhost:8077/ws/chat"; : 웹소켓 서버의 URL을 지정합니다.
• let webSocket = new WebSocket(chatUrl); : 새로운 웹소켓 객체를 생성하고, 설정한 URL에 연결합니다.
• webSocket.onopen = function (param) { ... }; : 웹소켓이 열릴 때 실행될 이벤트 리스너로, 연결이 성립된 후 바로 실행
• webSocket.send(JSON.stringify(chatMessageDto)); : chatMessageDto 객체를 문자열화하여 웹소켓을 통해 서버에 전송합니다.
  
  
  

1. ws/chat  으로 구분하는 웹소켓 객체 생성
2. .html에서 webSocket.send() 메소드 실행
3. 연결된 핸들러의 handleTextMessage() -> sendMessageSessionsInRoom() 메소드 실행

 

문제점

• let chatUrl = "ws://localhost:8077/ws/chat";
• 하드코딩 문제점 발견 -> 소프트 코딩

 

• ChatRoomController.java

String url = String.format("%s:%d", request.getServerName(), request.getServerPort());
model.addAttribute("hostUrl", url);

 

추가 후 변수변경

let chatUrl = "ws://{{hostUrl}}/ws/chat";