Til (2023.02.16)

온라인 오프라인 전환

 

온라인 오프라인 공유를위해 dbjson에 온라인 정보를 저장하는 방식을 사용했다.

백엔드가 가능하면 더 나은 방법이 있을 것 같지만 dbjson만으로 생각해본 방법은 이거였다.

우선 polling을 이용해 로그인 한사람의 타임스탬프를 30초마다 찍어준다.

  // 타임스탬프 찍어주기
  const dataApi = async () => {
    const rankApi = () =>
      axios
        .get(`http://localhost:3001/auth/${ProfleSteamId}`)
        .then((response) => {
          const i = response.data;
          axios.put(`http://localhost:3001/auth/${ProfleSteamId}`, {
            ...i,
            lastLogin: new Date(),
          });
        })
        .catch((error) => {
          console.log(error);
        });
    rankApi();
  };

  useEffect(() => {
    let polling = setInterval(() => {
      dataApi();
    }, 30000);

    return () => {
      clearInterval(polling);
    };
  }, []);

그리고 그사람의 마지막 접속중이였던 시간과 다른사람의 친구 창에서 현재 시간을 비교해 1분이상 차이가 나면 오프라인으로 전환한다.

  //친구 온라인 상태확인
  const isFriendOnline = (lastLogin: string): boolean => {
    const TEN_MINUTES = 60 * 1000; //1분
    const date = new Date();
    const lastLoginDate = new Date(lastLogin);
    const diffInMs = date.getTime() - lastLoginDate.getTime();
    const diffInSec = Math.round(diffInMs / 1000);
    return diffInSec < TEN_MINUTES / 1000;
  };

 

그리고 사용자가 수동으로 온/오프라인 전환을 할 수 있게 하기위해 자동으로 찍히는 마지막 로그인 시간말고 클릭으로 바꿀수 있는 login:true/false를 dbjson에 또 넣어 놨다. 결과적으로 컴포넌트에서 보여줄때 login과 시간이 1분안 인지가 모두 true일 때만 온라인 표시되게 해놨다.

                {/* 온라인표시 */}
                {i.login && isFriendOnline(i.lastLogin) ? (
                  <FriendBoxNameOnline />
                ) : (
                  <FriendBoxNameOffline />
                )}
              </FriendBoxNameImgDiv>

              <FriendBoxNameH2>{i.nickname}</FriendBoxNameH2>

              <FriendBoxNamePlayingP>
                `Dave the Diver`방 참여중
              </FriendBoxNamePlayingP>

              <FriendBoxNotice>7</FriendBoxNotice>
            </FriendBoxNameDiv>
          </FriendBoxDiv>
        );
      })}