웹소켓 통신기반 방과 게임 제어

[leebo155]

소켓 통신 양식

프론트와 백은 둘 다 아래와 형식을 사용하여 통신합니다.

{
    "type": 핸들링하기 위한 구분자,
    "data": 처리할 객체 데이터
}

방 리스트 제외 나머지 다른 데이터 핸들링은 우선 웹소켓이 연결된 후 처리합니다.

Front <-> Back

서버와 통신하기 위해 아래 경로로 웹소켓 연결을 요청합니다.

websocket = new WebSocket (
            'wss://'
            + window.location.host
            + '/ws/'
            + room_name
            + '/'
        );

서버로 데이터를 보냅니다.

websocket.send(JSON.stringify({
            "type": "join",
            "data": { 
                "roomid": roomid,
                "password": password
            }
        }));

핸들링 함수들

• 서버와 연결이 된 경우

  websocket.onopen = (event) => {}

• 서버와 연결이 끊어지거나 웹소켓을 닫은 경우

  websocket.onclose = (event) => {}

• 서버에서 데이터를 보낸 경우

  websocket.onomessage = (event) => {}

프론트에서 서버로 데이터를 보내는 경우는 아래와 같습니다.

• 방 생성
• 방 참가
• 방 퇴장
• 게임 준비
• 게임 중 키 입력

방 생성

방의 생성요청은 웹소켓 연결된 이 후 아래와 같은 형식으로 보냅니다.

{
    "type":  "create"
    "data": {
        "roomname": 방 이름,
        "password": 패스워드,
        "goalpoint": 목표 점수,
    }
}

요청을 받은 서버는 응답으로 아래와 같은 형식을 보냅니다.

{
    "type":  "joined"
    "data": {
        "player1": 생성자,
        "player2": None -> null,
        "ready1": False,
        "ready2": False
    }
}

이 후 프론트는 대기실 화면으로 이동되며 두 명의 플레이어를 각각 표시하게 됩니다. 참가자가 들어오거나 나가는 경우 동일한 형식으로 데이터가 옵니다.

방 참가

방의 참가요청은 웹소켓 연결된 이 후 아래와 같은 형식으로 보냅니다.

{
    "type":  "join"
    "data": {
        "roomid": 방 기본키,
        "password": 패스워드,
    }
}

요청을 받은 서버는 응답으로 아래와 같은 형식을 보냅니다.

{
    "type":  "joined"
    "data": {
        "player1": 생성자 이름,
        "player2": 참가자 이름,
        "ready1": False,
        "ready2": False
    }
}

방 퇴장

방의 퇴장요청시 웹소케의 연결이 종료됩니다.

{
    "type":  "leave"
    "data": Null
}

요청을 받은 서버는 게임이 시작됐는지 확인하여 응답을 보냅니다.

• 게임이 시작되기 전 방의 나머지 인원에게 다시 방의 상태를 보내줍니다.

  {
      "type":  "joined"
      "data": {
          "player1": 참가자 혹은 생성자 이름,
          "player2": None -> Null,
          "ready1": False,
          "ready2": False
      }
  }

• 게임이 시작된 후 방의 나머지 인원에게 게임의 종료신호와 승자를 보내줍니다.

  {
      "type":  "over"
      "data": {
          "winner": 참가자 혹은 생성자 이름
      }
  }

  이 때 종료신호를 받은 사용자의 핸들링은 아직 정의 되지 않았습니다. 추후 토의가 필요합니다.

게임 준비

방에 들어온 경우만 서버가 핸들링됩니다. 방의 준비 버튼을 누를 경우 아래와 같은 형식을 보냅니다.

{
    "type":  "ready"
    "data": {
        "value": True 혹은 False
    }
}

요청을 받은 서버는 응답으로 아래와 같은 형식을 보냅니다.

{
    "type":  "readied"
    "data": {
        "player1": 준비상태,
        "player2": 준비상태
    }
}

현재 참가자의 준비상태를 받아 비교합니다. 두명 모두 준비상태가 True인 경우 서버는 게임시작 신호를 보냅니다.

서버에서 게임시작을 알립니다.

{
    "type":  "start"
    "data": {
        "player1": 유저이름,
        "player2": 유저이름,
        "goalpoint": 목표점수
    }
}

이 후 게임이 종료될 때 까지 서버에서는 아래와 같은 데이터가 1/60초당 전송됩니다.

{
    "type":  "running"
    "data": {
        "player1": {
            "position": { "x": x좌표, "y": y좌표 },
            "score": 현재점수
        },
        "player2": {
            "position": { "x": x좌표, "y": y좌표 },
            "score": 현재점수
        },
        "ball": {
            "position": { "x": x좌표, "y": y좌표 },
        }
    }
}

게임 중 키 입력

게임 중에만 서버는 입력을 받습니다. 서버에게 아래의 형식을 보냅니다.

{
    "type":  "input"
    "data": {
        "input": "up" 혹은 "down", 
        "value": True 혹은 False
    }
}

[leebo155]