웹소켓(WebSocket) 8장 - socket.io와 lockstep

크레이지 아케이드를 html canvas로 구현하며, lockstep을 어떻게 socket.io로 구현해야 하나? 고민하였다. 

1. setInterval 사용

그 고민의 결과가 setInterval을 사용해 정보를 전송하며, flag를 사용해 정보를 전송할지 말지 결정하는 것이다.

클라이언트 다이어그램

서버는 모든 플레이어의 키보드 정보가 저장되면, 모든 키보드 정보를 전송하는 event를 emit한다. 그러면, flag를 true로 만들고 화면이 갱신되는 것이다. 하지만 이 방법은 문제가 있다. 

flag가 false가 되어서 정보를 전송하지 않는다면, 다음 주기가 될 때까지 해당 프레임이 화면에 그려지지 않아 렉이 걸리는 듯한 현상이 일어난다. 처음에는 어쩔 수 없는 현상이라고 생각했다. 하지만 그건 나의 아이디어가 부족한 것.

그렇다면 어떤 방법으로 해결할 수 있을까? 

2. setTimeout 사용

frameTime, currentTime, timeInterval 세 변수를 선언한다.

frameTime은 프레임이 실행되어야 할 시간, currentTime은 현재 시간, timeInterval은 현재 시간과 전 프레임의 실행시간의 차이다.

frameTime이 한번 화면이 갱신 될 때마다 delay만큼 추가되어 정확한 회수를 보장한다. 물론 클라이언트 브라우저에서 계산이 느리다면(컴퓨터가 아닌 스마트폰에서 실행 등) 문제될 수 있겠지만, 그것은 제외한다.

 

2번 방법을 사용 후 더욱 깔끔해진 것을 볼 수 있다.