캡스톤 디자인 : 중고거래 사이트 (1) 채팅 구현

우선 가장 중요한 채팅 기능을 만들어봤습니다. 

 

웹 소캣 중에서도 SocketJS와 STOMP 프로토콜을 이용해 만들었습니다. 코드는 구글에서 검색해서 복붙했지만 디비에 입력하기 위해서 코드를 많이 수정하긴 했습니다. 따라 만드시려면 SocketJS와 STOMP프로토콜의 대략적인 이해는 필요하다고 생각합니다.(완전히 다 이해하진 않더라도 어떻게 굴러가는지는 이해해야 한다는 소리입니다.)

 

그리고 중요했던게 채팅 치는 순간 나와 상대방을 구별하는 방법이 필요했습니다. 카톡만 하더라도 나는 노란색 상대방은 흰색 이렇게 정해져있기 때문에 그냥 일자로 쭉 뽑을게 아니었기 때문에 구별해야했습니다. 

 

문제는 웹 소켓에 연결해서 하는 채팅은 자바스크립트로 구별이 가능했지만 이미 디비에 저장되어있는 채팅은 어떻게 구별할지 난감했습니다.

 

처음엔 identifier이라는 칼럼을 넣어서 채팅방을 개설한 사람이면 1 아니면 0 이런식으로 했더니 나한테는 색이 잘 입혀지는데 상대방 입장에서는 색이 안바뀌고 고정되는 현상이 발생했습니다.

 

10시간을 고민한 끝에 다음과 같이 해결했습니다.

 

	<div id="msgArea" class="col">
            <div class="col-6" th:each="messages : ${messages}">
                <div th:classappend="${messages.writer} == ${session.loginId} ? 'alert alert-secondary' : 'alert alert-warning'">
                    <b th:text="|${messages.writeTime} ${messages.room.member.loginId} : ${messages.message}|"></b>
                </div>
            </div>
        </div>

 

해결하고 보니 너무 간단하게 풀려서 좀 어이없었지만 채팅 기능을 처음 구현하는것이기 때문에 한 삽질이라고 생각하면서 넘어갔습니다.

 

 

https://velog.io/@burub3/webSocket-STOMP-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%B1%84%ED%8C%85%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%A7%8C%EB%93%A4%EA%B8%B0

[webSocket] STOMP 사용해서 채팅프로그램 만들기

https://dev-gorany.tistory.com/235

[Spring Boot] WebSocket과 채팅 (3) - STOMP

 

위의 분의 코드를 보고 만들었습니다. 하지만 ChatRoomRepository가 디비에 연결하는게 아니고 Map에 연결했기 때문에 수정이 필요합니다. 또한 Repsitory가 Service의 역할도 대신하고 있기 때문에 이 부분 또한 분리해야 합니다.

 

 

그래서 결과물을 보시죠