[Next.js] Next.js 14에서 페이지 이동 감지하기

소켓 채팅방 구현을 여전히 진행중인데 반영해야 하는 요구사항이 추가되었다!!

 

서버에서 접속 유저들의 상태를 메모리의 객체로 관리하면서

접속한 유저가 방을 나갔을 때, 특히 접속 인원이 모두 방을 떠나거나/게임이 종료되어 메모리 삭제를 해야할 때 확실하게 메시지를 보내주어야 하는 것이다.

 

따라서,

1. 유저가 대기방 페이지를 벗어나면 '/leave'로 메시지를 보내 전체 접속 유저가 현재 방에서 떠난다는 신호를 보내주고,

2. 마지막 유저 마저 대기방 페이지를 떠나는 것은 방이 삭제되는 것으로 처리해 '/end'로 메시지를 보낸다.

 

const disconnect = () => {
    console.log('Disconnecting from WebSocket');
    if (userStatuses.length === 1) {
      stompClient.publish({
        destination: `/pub/rooms/${params.id}/end`,
      });
    } else {
      stompClient.publish({
        destination: `/pub/rooms/${params.id}/leave`,
      });
    }
    stompClient.deactivate();
  };

  useEffect(() => {
    window.addEventListener('popstate', disconnect);
    window.addEventListener('beforeunload', disconnect);
    return () => {
      window.removeEventListener('popstate', disconnect);
      window.removeEventListener('beforeunload', disconnect);
    };
  }, []);

 

 

1) popstate 이벤트: 브라우저의 뒤로 가기 버튼이 클릭되었을 때 발생하는 이벤트

2) beforeunload 이벤트: 사용자가 현재 페이지를 떠나기 전에 발생하는 이벤트

 

그런데 테스트를 계속 해보니 뒤로가기, 앞으로가기도 beforeunload 이벤트로 감지되는 것 같다...

 

찾아보면 router 이벤트로도 감지한다고 하는데, 지금 상황에서는 사용자가 페이지에서 벗어나는 다른 경우의 수가 발생하지는 않아서 이정도 처리만 해줘도 될 것 같다. 혹시나 다른 예외처리가 필요하게 된다면 다시 추가로 작성하러 오겠다!