개요

• Algo With Me 서비스 내에 모든 클라이언트에게 동일한 시간을 초 단위로 표기하는 기능이 필요하다.
• 다른 서비스를 위해 연결된 webSocket을 사용하기에 연결 관리는 고려 대상이 아니다.
• 웹 소켓으로 계속 시간을 받아오는 것이 안전하지만, 한정된 자원으로 최대한 많은 사용자가 서비스를 누릴 수 있도록 하기 위해 5초마다 서버로 부터 시간을 받아오고, 받아온 시간을 클라이언트에서 초 단위로 count하기로 한다.

고려할 상황

• 클라이언트 시간과 서버 시간의 차이가 생기면??
  • 서버로 부터 도착한 시간으로 초기화하고 클라이언트에서 초 단위로 증가(감소) 시킨다.
    • 가장 구현이 간단함.
    • setInterval이 실행 시간을 보정해주고, 5초 마다 갱신하기 때문에 믿을만 함.

setInterval은 실행 시간을 얼마나 잘 보정해 줄까?

• 실험 코드

let i = 0;
const start = Date.now();
let a = setInterval(() => {
  i += 1000;
  console.log(Date.now() - start - i);
}, 1000);

let b = setInterval(() => {
  heavyTask();
}, 1000);

function heavyTask() {
  console.time("heavyTask");
  for (let i = 0; i < 2_000_000_000; i++) {}
  console.timeEnd("heavyTask");
}

• setInterval 시간(1초) 보다 긴 작업이 메인 스레드에서 실행되면 오차가 커지긴 하나 추후에 보정을 해주는 것을 확인할 수 있었다.

  

결론

• 핵심 기능은 아니니까 구현이 간단한 서버 시간으로 클라이언트 시간을 항상 대체하고 timer를 작동시키기로 함.
• main 쓰레드가 1초 이상의 헤비한 작업을 하지 않으니 setInterval의 시간 보정 작업을 충분히 믿고 사용할만 하다고 생각함.

구현 결과

let intervalId 

// 1. 서버로 부터 시간이 온다 with Socket
// 2. intervalId clear
clear(intervalId)
// 3. time 변수에 서버로 부터 온 시간 할당
time = serverTime;
// 4. time 변수를 1초 마다 반복해서 감소 or 증가 시키는 함수 실행
intervalId = setInterval(()=>{time++})

// 1. ~ 4. 반복

286153827-6e45dff2-128f-4218-85ec-7737d41e8d74.mov