저번 글에서 채팅 기능을 만드는 데 성공했다.
그리고 이후 해당 채팅 기능을 컴포넌트화 하여 다른 페이지 안에 컴포넌트로 쓰려고 하는데
이슈가 또 발생했다.
전송 그리고 구독
이것이 바로바로 통신되는 것이 웹소켓의 기본이거늘 이상하게 컴포넌트로 만들어서 사용을 하니
send 정보는 cosole에 뜨지만, message 정보는 console에 뜨지 않았다.
그래서 처음에는 message 받는 subscribe 부분에 문제가 있는가 보다 하고 생각했는데,
이전에 테스트용으로 만든 채팅 코드와 전혀 다를게 없었기에 답답한 감정은 쌓여만 갔다.
subscribe 콜백 함수에 cosole.log("돼라 좀") 부분을 넣었으나 찍히지 않았기에 subscribe 함수의 문제보다는
애초에 subscribe 함수가 실행되지 않는구나라고 판단했다.
그렇다고 뭐 다른 문제점을 찾을 순 없었는데, 답답함에 테스트용으로 쓰던 파일을 현재 작업하는
프로젝트 페이지에 컴포넌트로 가져와 실행했다.
한 페이지에 채팅 컴포넌트를 두 개를 넣어 놓은 것인데, 이러고 나니 귀신 같이 채팅 기능이 되살아났다.
도대체 이게 뭔 일인가.. 하며 콘솔창을 또 뜯어보기 시작했다.
다시 찬찬히 보니 채팅 기능이 될 때는
>>> CONNECT
Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJybGFlaHFAZ21haWwuY29tIiwianRpIjoiMSIsInJvbGVzIjpbIlJPTEVfVVNFUiIsIlJPTEVfQ0hFRiJdLCJpYXQiOjE3Mjg1NDU4MDAsImV4cCI6MTcyODU4OTAwMH0.5g-pdCpmfNhuj3eY8I6eV1UJbuNlXm__X_vh9zrAUaAzwiicQP_8E-bpwnLJLL15AKS729AP5X6OrwRDqkwkyQ
accept-version:1.1,1.0
heart-beat:10000,10000이란 부분이 확인 되어야 하는데, 해당 부분이 간헐적으로 확인 되지 않음을 확인했다.
간단하게 작성된 채팅 기능 구현 코드는 무조건 CONNECT에 성공하는 걸까?
여러 코드가 얽힌 프로젝트용 채팅 기능 구현 코드는 간헐적으로 CONNECT에 실패하는 걸까?
라고 생각하길 1시간이 넘는 시간
{isLoading && (
<ChatRoom // 나름 얽힌 코드라고 생각한 컴포넌트
roomInfo={dmRoomList.find(item => item.id === currentChat)}
/>
)}
<DmTest2 /> // 간단히 작성한 채팅 컴포넌트이 코드를 보고 있자니.. DmTest2 컴포넌트도 isLoading 조건문 안에 넣어서 테스트 해볼까? 라는 생각을 했다.
그리고 다음과 같이 ChatRoom 은 주석처리하고 DmTest2 컴포넌트만 남겨놓고 페이지를 렌더링 해보니
{isLoading && (
<>
{/* <ChatRoom
roomInfo={dmRoomList.find(item => item.id === currentChat)}
/> */}
<DmTest2 />
</>
)}DmTest2 컴포넌트의 웹소켓 연결이 잘 되지 않는 것을 확인할 수 있었다.
결국 문제는 조건문(axios 연결 여부 관련 조건이였다) 에 포함된 경우 웹소켓 연결이 잘 되지 않음을 깨달았다.
2시간 지났다.
이제야 깨달았다!!
const socket = new SockJS('http://localhost:8080/ws')
const stompClient = StompJs.over(socket)해당 코드가 제대로 지정되지 않아서 비롯되는 문제였다.
이전 글에서 ctrl + s 키를 누를 때마다 메세지의 개수가 중첩 되어 전송되는 문제가 있어
따로 파일을 만들어 export 한 후 import 해서 쓰기로 했었는데 사실 ctrl + s 키에 따른 중첩이 문제가 아니고
처음에 1개씩 갔으면 상관이 없는데, 처음부터 2개씩 가니 위와 같은 선택을 한것이였다.
근데 알고보니 그 이유는 React.strictmode 때문이였다.
어제 나를 괴롭힌 이유를 피해 해결한 방안이 오늘 나의 발목을 붙잡은 것이다. 정말 스노우볼 그자체..
결국 import 해와서 쓰던 방식을 없애고 같은 파일에서 선언 및 사용을 하기로 했다.
참고로 ctrl+s 를 할 때마다 socket이 중첩되는 것을 확인 했고
useEffect 문 안에
return () => {
socket.close()
}해당 코드를 넣음으로서 ctrl + s 횟수에 따라 발생하던 오류도 해결했다.
정말이지.. 삽질 해서 땅굴 속으로 들어갔다가 다시 나와서 메꾸고 있는 꼴이다.
하지만 내 기억에는 정말 제대로 남을 것임에 후회는 없다 ㅎㅎ
