해당 클라이언트가 플레이어 부분까지 만들어지면서 위치동기화 테스트를 간단하게 해보았을떄 문제가 일어났습니다.
레이턴시를 로그 찍어봤더니 너무 높은 지연시간이 나왔습니다. 그러다 보니 두개의 클라이언트를 켰을때 버벅이는 현상이 발생하였습니다.
레이턴시 높은 사진
확인해 보니 현재 클라이언트에서 0.02초 마다 moveRequest요청 패킷을 보내고 있고 저희도 현재 인터벌로 0.0166..초 마다 클라이언트들에게 moveNotification으로 패킷을 전송해 주고 있습니다.
게임 세션이 시작될떄 인터벌로 noti를 보내주고 있습니다.
class Game {
constructor(id) {
this.id = id;
this.hostId = null;
this.users = [];
this.ghosts = [];
this.state = GAME_SESSION_STATE.PREPARE;
}
startGame() {
// 귀신 5마리 정도 세팅
// 게임 상태 변경
this.state = GAME_SESSION_STATE.INPROGRESS;
IntervalManager.getInstance().addPlayersInterval(
this.id,
() => usersLocationNotification(this),
1000 / 60,
);
IntervalManager.getInstance().addGhostsInterval(
this.id,
() => ghostsLocationNotification(this),
100,
);
startGameNotification(this);
}
...
...
...그럼 인터벌로 보내는 형식을 하지말고 클라이언트의 moveRequest 요청이 들어올때 moveNotification로 통지를 알려주는 형식으로 바꾸니 조금 레이턴시가 돌아 왔습니다.
플레이어 이동 요청에 따른 핸들러 함수
export const movePlayerRequestHandler = ({ socket, payload }) => {
try {
const { playerMoveInfo } = payload;
const { userId, position, rotation } = playerMoveInfo;
...
...
usersLocationNotification(gameSession); // 여기서 noti를 전송하게 해주었습니다. 인터벌 X
} catch (e) {
console.error(e.message);
}
};하지만 그래도 자주 레이턴시가 높게 로그가 찍히네요 원인을 찾아보니 클라이언트에서 패킷을 받고 처리하는 속도가 약간 늦는 것을 확인했습니다. recive.Count(현재 패킷을 받은 수)가 계속해서 쌓이고 처리하는게 느려지면서 레이턴시가 올라가는 현상이였습니다.
처리는 못하고 패킷을 계속해서 받고 있어서 이러한 현상이 발생하였던 것이였습니다.
receiveQueue.Count쌓이는 사진
sendQueue.Count
그래서 클라이언트 자체에서 0.02초 마다 이동 요청을 보내는 것을 0.1마다 이동 요청을 보내는 것으로 하니 훨씬 좋아졌습니다.
해결 후
레이턴시 사진
오늘의 회고
확실히 이번에 좋은 경험을 한것 같습니다. 클라이언트의 환경을 고려하여 어느정도 처리할 수 있을 정도로 패킷을 보내주어야 하는 것을 알았고 어느정도 요청 및 응답의 주기를 정해주어야 하는 것을 느꼈습니다.
오늘도 화이팅
