스파르타) Ch.5 팀 프로젝트 - 타워 디펜스 온라인 (D-5)

 > 과제 진행 간 완료한 사항 및 문제점과 해결 과정을 정리해보았다.

 

학습 키워드: Node.js, socket.io, protobuf

 

1. 완료한 과제 진행 사항

1) 클라이언트 수정, 프로토콜 버퍼 관련 코드 및 매핑 수정 등:

 - 클라이언트의 multi_game.js에 있던 socket을 별도의 파일(클래스)로 분리

 - multi_game.js 의 코드를 Game 클래스로 전환

 - 클라이언트가 소켓 연결을 유지할 수 있도록 html 코드의 href 제거 및 hide css클래스 토글 구현

 

2. 과제 진행 간 문제점

1) 패킷 deserialize 시 RangeError 발생 (해결):

Figure 1. RangeError 발생

 이번 프로젝트에서는 TCP 소켓이 아닌 WebSocket을 사용하게 되었는데, protobuf를 사용해보는 것이 도전 요구사항에 있어서 미리 구현하고 있었다. 테스트 중 이전 프로젝트에서 많이 봤던 RangeError가 출력되었는데, 항상 발생하던 잘 못된 타입이 원인은 아니었다.

 

 처음 로그인 시도 이후 로그인 정보(ID, PW)를 바꿔서 재시도 할 때, 처음부터 약간 긴 로그인 정보를 입력할 때 발생했다. 단순히 문자열 길이가 길어서 그런가 하고 테스트 해봤지만, ID=12, PW=12 에서 PW를 1로 바꿔서 시도하는 경우에도 아래와 같이 똑같은 에러가 발생했다.

Figure 2. 다른 케이스에서도 발생

<!-- 원래 쓰고있던 태그 -->
<!-- <script src="https://cdn.socket.io/4.0.0/socket.io.min.js" ></script> -->

<!-- 바뀐 태그 -->
<script
  src="https://cdn.socket.io/4.7.5/socket.io.min.js"
  integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
  crossorigin="anonymous"
></script>

 파악해보니 클라이언트에서 직렬화 될 당시에는 버퍼의 크기가 정상적으로 출력되는데, 막상 서버로 넘어가서 소켓의 'event' 이벤트의 callback 함수인 onData에 도달할 때는 8192 bytes로 불어나있는 현상이 생기는 것이었다.

 

 클라이언트쪽 버퍼가 ArrayBuffer로 직렬화를 하는데 이 타입이 Node.js의 Buffer로 변환될 때 내부에서 제대로 처리가 안되는 것인가 싶어서 처음에는 Buffer로 전환할 방법이 없나 찾아봤으나 불가능했고, 이후 socket.io의 내부 동작에서 이유를 찾아보기 위해 socket.io 공식 사이트를 둘러보다가 원래 쓰고있던 것보다 높은 버전의 CDN 주소를 발견하여 교체해보니 정상적으로 작동했다. 정황상 클라이언트가 사용중이던 Socket.IO의 CDN 버전과 서버가 사용중이던 socket.io NPM 라이브러리의 버전 차이로 인해 버퍼가 제대로 전달되지 않는 상태였던 것 같다.

 

Figure 3. 버퍼의 크기(노란색 글자)가 정상적임

 

 

 

3. 기타 사항

1) 서버에서 전송한 버퍼가 브라우저에서 역직렬화 시 illegal buffer 에러를 출력하는 문제 (미해결):

Figure 4. 서버에서 전송 직전 역직렬화한 데이터

Figure 5. 서버의 버퍼 바이트 배열

Figure 6. 클라이언트에서 illegal buffer 에러 출력

Figure 7. 브라우저의 memory inspector를 사용하여 확인한 바이트 배열

 

 서버와 클라이언트가 같은 직렬화/역직렬화 코드 및 proto 메세지 타입을 사용중인데, 서버에서 직렬화 후 전송한 데이터가 클라이언트에 도달(Figure 5와 7에서 처럼 동일한 바이트 배열을 출력)했지만, 역직렬화를 실패하는 상황이 생겼다. 막연하게 라이브러리 문제로 짐작하고 스크립트 태그 교체를 시도했으나 해결하지 못했으며, 아직 정확한 원인은 파악하지 못했다 ( +추가: https://donkim0122.tistory.com/113 ).

 

 

--

REFERENCES:

 

[게임 서버] 타워 디펜스 게임 온라인 프로젝트 | Notion

 > 과제 spec

GitHub - eliotjang/tower-defense-multiplayer-game-project: Socket.io 사용 타워 디펜스 멀티플레이어 게임 서버

 > 과제 repo