내 제출물 개요

Python, TypeScript 및 Redis를 사용하여 "Red Light, Green Light"게임을 다시 만들었습니다!

8월 초 어느 날 저는 Redis Hackathon 기사를 접했을 때 백그라운드에서 MrBeast의 Squid Game 레크리에이션 비디오를 다시 보면서 DEV를 탐색했습니다. 그런 다음 Redis Light, Green Light!



저는 Redis가 제공하는 Red Light, Green Light의 온라인, 실시간, 멀티플레이어 버전을 직접 만들어 Wacky Wildcard 프로젝트 카테고리에 제출하여 해커톤에서 우승할 수 있는 기회를 얻기로 결심했습니다!

나는 신속한 프로토타이핑을 위해 내가 가장 좋아하는 언어와 프레임워크를 사용했습니다. Flask가 포함된 Python을 사용하여 백엔드를 구동하고 TypeScript를 Nuxt.js 프레임워크를 사용하여 내 게임의 프런트엔드 구성 요소를 구축했습니다.

실시간 통신을 위해 Flask 앱에 Flask-SocketIO 라이브러리를 추가하고 Nuxt 앱에 socket.io-client 라이브러리를 추가했습니다. 또한 비동기 작업을 예약하고 처리하기 위해 셀러리를 추가했습니다. Redis는 websocket 메시지의 메시지 대기열로 사용되었으며 셀러리 작업의 브로커로도 사용되었습니다.

이것은 Redis Stack 및 Redis OM을 사용한 첫 번째 프로젝트였으며 이러한 도구를 사용하는 것이 정말 좋았습니다. 저는 대부분의 데이터를 해시에 저장했고 Redis OM 라이브러리는 이 데이터 유형을 사용하기에 완벽합니다. 나는 또한 Redis 스트림을 처음으로 사용했는데 정말 즐거웠습니다.

백엔드 애플리케이션 서비스에는 다음이 포함됩니다.

Flask 서버(API 끝점 및 Websocket 처리기용)

Celery beat 작업 스케줄러(각 방의 조명 색상을 변경하는 작업 예약용)

셀러리 작업자(방의 조명 색상을 변경하고 Websocket을 통해 해당 방에 있는 플레이어를 업데이트함)

프로젝트 작동 방식에 대한 자세한 내용은 아래 비디오를 확인하십시오.

제출 범주

엉뚱한 와일드카드

레디스 라이트, 그린라이트 유튜브 영상

사용 언어

파이썬. JavaScript에 대한 선외 가작.

코드 링크

브리앙카페 / redis-light-green-light-dev-to-hackathon

Redis Hackathon on DEV에 제출했습니다! Python, JavaScript 및 Redis로 구축된 "Red Light, Green Light"

레디스 라이트, 그린 라이트

이 프로젝트는 Python, Javascript 및 Redis로 구축된 Squid Game의 "Red Light, Green Light"의 온라인 멀티플레이어 구현입니다. 이것은 2022년에 대한 나의 제출물입니다!

게임 플레이

Redis 스트림으로 빌드된 게임 이벤트 로그

아키텍처 개요

cloc을 사용한 코드 개요(코드 줄 수 계산)

make cloc
github.com/AlDanial/cloc v 1.94  T=0.03 s (1102.7 files/s, 67098.7 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Vuejs Component                 13            104             14            528
Python                           3            178            104            410
Markdown                         5            139              0            272
YAML                             3             10              0             83
make                             1             10              2             34
SVG                              2              0              0             22
TypeScript                       1              1              1             22
CSS                              1              4              0             18
JavaScript                       1              0              1             18
Text                             2              0              0             13
Dockerfile                       1              8              0             12
-------------------------------------------------------------------------------
SUM:                            33            454            122           1432
-------------------------------------------------------------------------------

개요 비디오

다음은 프로젝트와 사용 방법을 설명하는 짧은 비디오입니다.

View on GitHub

추가 리소스/정보

Redis를 다중 모델 데이터베이스로 사용하기 위한 클라이언트 라이브러리인 Redis OM을 확인하십시오.

RedisInsight을 사용하여 Redis에서 데이터를 시각화합니다.

free Redis database에 가입하세요 .