메세지를 읽지 않았는데 안 읽은 메세지가 안뜬다...

환경 :  바닐라JS SPA 방식

 

문제 :

 안 읽은 메세지 카운터 기능을 구현중에 메세지를 읽지 않았는데 안 읽은 메시지 갯수가 뜨지 않음

사실 수집:

 A 채팅방에 들어갔다가 다른 컴포넌트로 이동해서 A가 메세지를 보내면 안 읽은 메세지 갯수가 떠야하는데 뜨지 않음을 확인

원인 추론:

 1 :1 채팅방에 들어갈때 WebSocket send를 날리고 다른 컴포넌트로 이동을 할때 Webscoket 에 나갔다고 다시 send를 날려야하는데 하지 않아서 이런 버그가 난걸로 예상

조치 방안 및 구현:

document.querySelectorAll('a[data-spa]').forEach(link => {
      link.addEventListener('click', () => {
        this.leaveWebSocket();
      });
    });

페이지의 모든 a태그에 Event를 걸어 다른 컴포넌트로 이동시 Websocket 으로 send를 날림

결과 관찰:

 A 채팅방에 있다가 다른 컴포넌트로 이동후 A 가 메시지를 보내도 안 읽은 메세지가 잘 떠있는 걸 확인!