2023-2-WebService-Assignment 2

구현 요약

socket.io를 이용하여 실시간 웹 게임 구현
전적 보기 버튼을 통해 자신의 전적 확인 가능
- SPA로 구현되어, /record로 직접 접근하는 경우엔 확인 불가능
방 생성 버튼을 통해 방 생성 가능
- 버튼을 클릭할 경우 입력 폼이 생성되며, 유저 입력 + by {socket.id} 로 항상 유니크한 방 이름 생성
- 방 생성 시 바로 접속하며, 다른 클라이언트들에게 방 목록을 다시 그리도록 이벤트 발생
게임 시작 시 유저 리스트를 셔플하여 순서 결정 (들어온 순서에 관계 없음)
- 자신의 차례일 때만 슬라이더가 보임
- 10초안에 누르지 않을 경우 대미지가 0으로 계산되며 차례가 넘어감
게임 종료 후 승패여부와 홈으로, 준비 버튼이 보이도록 함

Node.js 기반의 프레임워크인 NestJS로 구현
MySQL을 사용하였으며, 다음 명령어를 통해 도커 컨테이너로 돌림 docker run --name assign-db --env-file .env -d -p 3306:3306 mysql:latest
과제 1과 동일한 DB 테이블 사용
로그인 / 회원가입 폼 간 이동 버튼이 존재하지 않아서, 직접 URL을 통해 이동해야 함
SPA(Single Page Application)로 구현하였으며, 일부 뒤로가기는 감지하지 못함
- 뒤로가기를 이용할 경우, 일부 소켓 이벤트가 동작하지 않는 버그가 있음. 새로고침 시 정상 동작
- URL을 통해 이동하는 경우는 모든 소켓 이벤트 정상 동작
- 게임 중 새로고침 시 소켓 재연결로 인해 터짐
반드시 4명이 있어야만 / 모두 준비 완료해야지만 게임이 시작되도록 함
방 목록 또한 소켓으로 갱신됨
아주 저렴한 UI로 구현됨
로그인 후 정상 Jwt를 가지고 있어야만 소켓 연결이 완료되며, 그 외의 경우는 폼만 보이고 아무 동작을 하지 않음
이상한 Jwt를 가지고 /record에 접근할 때 예외를 발생시킴

updateRoomList : 방 리스트 업데이트 시
- 클라이언트에서 이벤트를 받을 때마다 방 리스트를 갱신해줌
startGame : 4명이 모두 준비 완료되었을 때 게임 시작
- 게임 시작을 알려서 클라이언트에서 게임을 그릴 수 있도록 함
endGame : 병뚜껑 체력이 0일 때 게임 종료
- 게임 결과 저장 후 발생되는 이벤트로, 게임 그리던 곳에 (승,패 / 준비 버튼 / 나가기 버튼) 출력
updateGameState : 게임 상태 변경 (병뚜껑 체력 갱신 후 턴 변경 + 가장 높은 hit 출력)
- 병뚜껑 체력, 가장 높은 hit + userId, 다음 차례

createRoom : 방을 생성할 시
- 해당 room을 생성하면서 입장 -> 메인 컴포넌트 다시 그리기
joinRoom : 방을 클릭해서 들어갈 시
- 해당 room에 대한 유효성 검사 후 입장 (입장 인원) -> 메인 컴포넌트 다시 그리기
leaveRoom : 방을 나오거나 방에 들어간 채로 접속이 끊길 시
- 메인 페이지로 다시 이동 후 updateRoomList 보냄. 만약 해당 room의 인원이 0이라면 삭제
changeReadyStatus : 준비 상태 변경
- 현재 준비 상태 변경 / 방 인원 준비 상태 검사 후 게임 시작
- 프론트에서 1초에 한 번만 누를 수 있게 상태 조절해야할 듯
updateGameState : 게임 상태 변경 (현재 플레이어의 hit)
- 병뚜껑 치기 버튼을 누를 때 발생, 수치를 전달하여 병뚜껑 체력을 계산하고
- 서버 로직 동작 후 updateGameState 이벤트를 받음
fetchRoomStatus : 방 상태 (방에 있는 사람과 레디 상태) 갱신
- 게임 종료 후 나간 사람을 추적하기 위한 이벤트