[Spring] 10-3. 채팅방 통신(채팅방 메세지 추가)

1. 채팅방 통신

 
▶ chatRoom.jsp

 
=> 다음과 같이 수정
 
 
WebSocket 이란?
- 브라우저와 웹서버간의 통신을 지원하는 프로토콜

* 전이중통신(Full Duplex) : 두대의 단말기가 데이터를 송수신하기위해, 각각 독립된 회선을 사용하는 방식
ex) 전화기

- HTML5부터 지원
- JAVA에서는 7버전부터 지원(8이상부터 사용 권장)
- Spring Framework 4버전 이상부터 지원
 

=> 맨아래에 스크립트 추가
 
 

 
 
▶ chat.js
=> 반드시 JSON 형식으로 보내야한다!!!(문자열 형태로 보내야함) 
=> send(값) : 웹소켓 핸들러로 값을 보내는 역할을 하는 함수.  send로 전달된 데이터는 웹소켓핸들러 내부의 handleTextMessage함수가 수신함

// 채팅메세지 보내기 기능 만들기
document.getElementById("send").addEventListener('click', sendMessage);

// 채팅메세지 보내기 함수
function sendMessage(){

    // DB에 저장할 채팅메세지 정보 얻어오기
    const inputChatting = document.getElementById("inputChatting"); // textarea

    if(inputChatting.value.trim().length === 0 ) {   // 공백까지 지워서 입력이 0이면
        alert("뭐라도 작성하세요.");

        inputChatting.value = "";
        inputChatting.focus();
    }else{  // 한글자 이상 입력한 경우
        
        // 메세지 객체를 생성
        // 입력한 값을 받아 JSON 형태로 받을 것임
        // 자동으로 나머지는 받아주기 때문에 쓸필요 없음
        const chatMessage = {
            message : inputChatting.value,
            chatRoomNo,
            userNo,
            userName
        };

        // 데이터 전달시 js의 객체형태로는 전달 못함. 반드시 JSON으로 변환해주기
        const jsonParsedMessage = JSON.stringify(chatMessage);

        // 데이터를 전달하는 역할을 함
        // send(값) : 웹소켓 핸들러로 값을 보내는 역할을 하는 함수
        // send로 전달된 데이터는 웹소켓핸들러 내부의 handleTextMessage함수가 수신함
        chattingSocket.send(jsonParsedMessage);
        
        inputChatting.value = "";
    }
}

 
 
▶ ChatWebsocket.java
 
=> TextMessage : 웹소켓을 이용해 전달된 데이터(텍스트)가 담겨있는 객체
=> payload : 전송되는 데이터(JSON객체로 전달받음)
=> JackSon 라이브러리를 활용할 예정. JackSon 라이브러리 : Java에서 JSON을 다루기 위한 라이브러리
=> JackSon-databind : objectMapper를 이용해서 JSON형태로 넘어온 데이터를 특정 VO필드에 맞게 자동으로 매핑시켜줌
 

 
=> 맨위에 Autowired 추가(ChatService)
 
 

	/* 클라이언트로부터 메시지(message)가 도착했을 시 실행되는 함수 */
	@Override
	public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
		// TextMessage : 웹소켓을 이용해 전달된 데이터(텍스트)가 담겨있는 객체
		
		// payload : 전송되는 데이터(JSON객체로 전달받음)
		log.info("전달된 메시지{}", message.getPayload());
		
		// JackSon 라이브러리 : Java에서 JSON을 다루기 위한 라이브러리
		// JackSon-databind : objectMapper를 이용해서 JSON형태로 넘어온 데이터를 특정 VO필드에 맞게 자동으로 매핑시켜줌
		
		ObjectMapper objectMapper = new ObjectMapper();
		ChatMessage chatMessage = objectMapper.readValue(message.getPayload(), ChatMessage.class);  // 값의 타입은 ChatMessage.class
		
		// 전달받은 메세지를 DB에 CHAT_MESSAGE테이블에 추가
		int result = chatService.insertMessage(chatMessage);
	}

 
☞ 두번째 매개변수 TextMessage message로 수정
 
 
 
 
▶ ChatService.java

	int insertMessage(ChatMessage chatMessage);

 
 
▶ ChatServiceImpl.java

	@Override
	public int insertMessage(ChatMessage chatMessage) {
		chatMessage.setMessage(Utils.XSSHandling(chatMessage.getMessage()));  // 스크립트 방어
		chatMessage.setMessage(Utils.newLineHandling(chatMessage.getMessage()));  // 개행처리
		
		return dao.insertMessage(chatMessage);
	}

 
 
▶ ChatDao.java

	public int insertMessage(ChatMessage chatMessage) {
		return sqlSession.insert("chatMapper.insertMessage", chatMessage);
	}

 
 
▶ chat-mapper.xml

	<!-- 채팅방 메세지 추가 -->
	<insert id="insertMessage" parameterType="chatMessage">
		INSERT INTO CHAT_MESSAGE
		VALUES (
			SEQ_CM_NO.NEXTVAL,
			#{message},
			SYSDATE,
			#{chatRoomNo},
			#{userNo}
		)
	</insert>

 
 
▶ 결과

=> DB에 정상적으로 추가된 것 확인
 

 
☞ 다른 회원의 채팅방 화면