GraphQL이있는 멀티 플레이어 TIC TAC 발가락-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

GraphQL이있는 멀티 플레이어 TIC TAC 발가락

尊渡假赌尊渡假赌尊渡假赌

Apr 17, 2025 am 10:54 AM

GraphQL이있는 멀티 플레이어 TIC TAC 발가락

이 튜토리얼은 GraphQL을 사용하여 멀티 플레이어 TIC-TAC-TOE 게임을 구축하여 프론트 엔드 개발을위한 전력과 효율성을 보여줍니다. GraphQL의 강점은 클라이언트가 데이터 요구를 정확하게 지정할 수 있도록하여 최적화 된 예측 가능한 응답을 초래할 수 있습니다.

백엔드 용 사용자 정의 GraphQL 서버와 함께 Hasura GraphQL 엔진을 사용하고 프론트 엔드를 위해 Apollo 클라이언트와 반응합니다 (모든 프레임 워크는 적응할 수 있지만). 이 접근법은 Hasura가 제공하는 데이터베이스 관리의 용이성과 게임 로직을위한 사용자 정의 서버의 유연성을 결합합니다.

GraphQL 기초 :

GraphQL은 API 쿼리 언어입니다. 주요 기능은 다음과 같습니다.

클라이언트 지정 쿼리 : 클라이언트는 과도하게 가져 오는 것을 피하고 필요한 데이터 만 요청합니다. 예를 들어, 사용자의 ID와 이름을 얻으려면 다음과 같습니다.

 쿼리 {
  사용자 {
    ID
    이름
  }
}

로그인 후 복사

단일 엔드 포인트, 사후 요청 : API 상호 작용을 단순화합니다.
구조화 된 응답 : 응답 구조는 쿼리를 기반으로 예측할 수 있습니다. 위의 쿼리의 경우 성공적인 응답이 다음과 같습니다.

 {
  "데이터": {
    "사용자": {
      "ID": "Auth : 482919",
      "이름": "Jon Doe"
    }
  }
}

로그인 후 복사

내성 : 클라이언트는 지원되는 쿼리에 대해 서버를 쿼리 할 수 있습니다.

이 게임에 왜 그래프 QL?

GraphQL의 정밀도는 데이터 전송을 최소화하여 더 빠르고 효율적인 응답으로 이어집니다. Introspection은 동적 쿼리 빌딩을 가능하게하고 Linting 및 자동 완성과 같은 기능을 통해 DX (Developer Experience)를 향상시킵니다. 단일 엔드 포인트는 API 관리를 단순화하고 실시간 구독에 대한 내장 지원은 멀티 플레이어 기능의 생성을 간소화합니다.

주요 그래프 QL 용어 :

쿼리 : 데이터를 가져옵니다.
돌연변이 : 서버의 데이터를 수정합니다.
구독 : 클라이언트를 실시간 데이터 업데이트로 가입합니다.
쿼리 변수 : 매개 변수가 쿼리로 전달되었습니다.

백엔드 설정 :

백엔드는 Hasura GraphQL 엔진 (데이터베이스 상호 작용)과 사용자 정의 그래프 QL 서버 (게임 로직)를 사용합니다. 게시물을 데이터베이스로 사용하겠습니다. Hasura는 Postgres, CRUD 작업을 처리하고 WebHook 트리거 및 원격 스키마 지원을 제공하는 즉각적인 실시간 GraphQL API를 제공합니다.

백엔드 설정 단계는 다음과 같습니다.

Hasura 배포 : Heroku에 Hasura GraphQL 엔진의 무료 인스턴스를 배포하십시오.
데이터베이스 테이블 작성 : Hasura 콘솔을 통해 Postgr에서 user , board 및 move 을 만듭니다. 효율적인 쿼리를 가능하게하기 위해이 테이블 사이의 관계를 정의하십시오.
사용자 정의 서버 : 사용자 정의 GraphQl Server (원본 자습서에서 제공)를 배포하여 이동 유효성 검사 및 턴 전환과 같은 게임 로직을 처리합니다. 이 서버에는 Postgres Connection String이 환경 변수로 필요합니다.
원격 스키마 통합 : API 엔드 포인트를 통합하기 위해 사용자 정의 서버의 URL을 원격 스키마로 Hasura에 추가하십시오.