캡스톤 디자인 : 중고거래 사이트 (3) 채팅 실시간 알람

실시간 알람은 원래 하려고 한게 아닌데 주변인들한테 지금 내가 채팅프로그램을 만들고있는데 실시간 알람이 있으면 좋겠냐 없으면 좋겠냐 물어봤을 때 전부 다 있어야 할거같다고 해서 만들었습니다.

 

처음에 계획은 axios를 이용해 /chat/get_room_id 라는 url로 접근해 현재 내가 갖고있는 채팅방의 roomId를 자바스크립트 배열에 저장하고 배열에 있는 값을 꺼내서 for문을 돌려 모두 subscribe 연결을 하려고 했습니다.

 

근데 자바스크립트의 비동기 문제 때문에 값을 저장하기 전에 subscribe로 연결되어버려서 자바스크립트 배열에 값이 텅텅 비어있는 상황이 연출되었습니다. 그래서 async await 를 이용해 순서를 바로잡는데에는 성공했지만... 웹 소켓 connect가 안되는 현상이 발생했습니다. 

 

Opening Web Socket... 에서 멈춰있는 로그를 보면서 구글링을 엄청나게 했던 것 같습니다. 영어로도 검색해보고 한글로도 검색해보고 별에별짓을 다해봤는데 저와 같은 상황인 사람이 한명도 없어서 이틀동안 삽질한게 너무 현타와서 접으려던 찰나에 어? 그냥 디비에서 꺼내와서 모델로 프론트에 넘겨주면 되나? axios를 쓰지 않고도 할 수 있을거같은 느낌이 들었습니다.

 

그래서 디비에서 꺼내와서 모델에 담아서 자바스크립트 배열에 바로 넣고 콘솔에 찍어보니 데이터가 잘 들어가있는 모습을 확인할 수 있었습니다. 

 

그렇게 만든 채팅 실시간 알람을 영상으로 확인해보시죠

 

 

 

참고한 레퍼런스는 없습니다. stomp 프로토콜을 이용한 채팅을 응용한 버전입니다.