You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I recreated the game "Red Light, Green Light" using Python, TypeScript and Redis!
11
11
12
-
One day in early August I was browsing Dev.to while re-watching MrBeast's Squid Game recreation video in the background when I cam across the DEV article about the Redis Hackathon. Then I got a crazy idea: **Redis Light, Green Light**! I became determined to create my own online, real-time, multi-player version of Red Light, Green Light powered by Redis and submit it to the Wacky Wildcard project category for my chance to win the hackathon!
12
+
One day in early August I was browsing DEV while re-watching MrBeast's Squid Game recreation video in the background when I cam across the DEV article about the Redis Hackathon. Then I got a crazy idea: **Redis Light, Green Light**! I became determined to create my own online, real-time, multi-player version of Red Light, Green Light powered by Redis and submit it to the Wacky Wildcard project category for my chance to win the hackathon!
13
13
14
14
I used my favorite languages and frameworks for rapid prototyping: Python with Flask to power the backend and TypeScript with the Nuxt.js framework to build the frontend components for my game.
15
15
16
-
For real-time communication I added the `Flask-SocketIO` library to my Flask app and the `socket.io-client` library to my Nuxt app. I also added celery for scheduling and processing async tasks (more on this later). Redis was used as the message queue for websocket messages and it was also used as the broker for celery tasks.
16
+
For real-time communication I added the `Flask-SocketIO` library to my Flask app and the `socket.io-client` library to my Nuxt app. I also added celery for scheduling and processing async tasks. Redis was used as the message queue for websocket messages and it was also used as the broker for celery tasks.
17
17
18
-
`redis-py` was used to get and set hash values that kept track of live game data in Redis. Redis streams were used as a way to track all events for a historical record of every action in every game.
19
-
20
-
Like I do with most of my projects, I used `docker-compose` to set up the backend application services and database and I used Nuxt's `npm run dev` command to work on the UI.
18
+
This was my first project working with Redis Stack and Redis OM and I really liked using these tools. I stored most of my data in hashes, and the Redis OM library is perfect for using this data type. I also used Redis streams for the first time which was a lot of fun.
21
19
22
20
The backend application services include:
23
21
24
22
- Flask server (for API endpoints and Websocket handlers)
25
23
- Celery beat task scheduler (for scheduling tasks to change the light color in each room)
26
24
- Celery worker (to change the light color for a room and to update that players in that room via Websocket)
Please check out the video below for more details about how the project works.
29
+
28
30
### Submission Category
29
31
30
32
Wacky Wildcards
31
33
32
-
### [Optional: Video Explainer of My Project]
34
+
### Redis Light, Green Light YouTube Video
33
35
34
-
[Note]: #(This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)
Copy file name to clipboardExpand all lines: README.md
+67-20Lines changed: 67 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -1,20 +1,49 @@
1
1
# Redis Light, Green Light
2
2
3
-
This project is an online multiplayer implementation of the game "Red Light, Green Light" using Python, Javascript and Redis. This is my submission for the 2022 [Redis Hackathon on DEV](https://dev.to/devteam/announcing-the-redis-hackathon-on-dev-3248)
3
+
This project is an online, multiplayer implementation of "Red Light, Green Light" from Squid Game built with Python, Javascript and Redis. This is my submission for the 2022 [Redis Hackathon on DEV](https://dev.to/devteam/announcing-the-redis-hackathon-on-dev-3248)!
4
4
5
5
### Gameplay
6
6
7
7

Here's a short video that explains the project and how it uses Redis:
16
45
17
-
[](https://www.youtube.com/watch?v=vyxdC1qK4NE)
46
+
<iframewidth="560"height="315"src="https://www.youtube.com/embed/BoalZKmgoEU"title="YouTube video player"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
18
47
19
48
## How it works
20
49
@@ -37,7 +66,7 @@ class Position(HashModel):
37
66
room: uuid.UUID= Field(index=True)
38
67
```
39
68
40
-
RedisOM is used to perform CRUD (create, read, update and delete) operations on these hashes in API requests, websocket handlers and celery tasks. Here are some examples:
69
+
Redis OM is used to perform CRUD (create, read, update and delete) operations on these hashes in API requests, websocket handlers and celery tasks. Here are some examples:
41
70
42
71
**Creating a new room**: `CREATE operation` on `Room` hash
43
72
@@ -61,17 +90,17 @@ There are **eight** types of events that can happen in the lifecycle of a game:
61
90
62
91
```py
63
92
classEventType:
64
-
CREATED="created"
65
-
LIGHT="light"
66
-
JOIN="join"
67
-
MOVE="move"
68
-
WIN="win"
69
-
DIE="die"
70
-
LEAVE="leave"
71
-
END="end"
93
+
CREATED="created"# new game room is created
94
+
LIGHT="light"# the light color is updated
95
+
JOIN="join"# player joins a room
96
+
MOVE="move"# player moves successfully when the light is green
97
+
WIN="win"# player wins by moving 100 steps
98
+
DIE="die"# player tries to move when the light is read
99
+
LEAVE="leave"# player leaves or is disconnected from the game
100
+
END="end"# game ends because there are no more players in the room
72
101
```
73
102
74
-
I use streams as append-only logs to persist very action that happens during the course of a game. Here are some examples of how I store game event data in streams:
103
+
I use streams as append-only logs to persist very action that happens during the course of a game. Each event in the stream has an `event` property that stores one of the `EventType`s listed above. Here are some examples of how I store game event data in streams:
75
104
76
105
**Record a room creation event**
77
106
@@ -115,9 +144,13 @@ To display all events for a given room, the `XRANGE` command is used to fetch al
In addition to storing temporary game state and append-only event logs, Redis also supports the application as a message broker for the celery worker and scheduler, and it supports the SocketIO as a message queue which is required when there are multiple servers process (Flask, celery, celerybeat). Main application data is stored on DB index `0`, and these other services use other DB indexes for isolation and separation of concerns to the extent that it makes sense.
150
+
118
151
## How to run it locally?
119
152
120
-
Running the application in a local development environment involves starting the web client and also starting multiple backend services. Backend services can be brought up using a `docker-compose.yml` file or they can be started by running commands in Python virtual environment.
153
+
Running the application in a local development environment involves starting the web client and also starting multiple backend services. Backend services can be brought up using a `docker-compose.yml` file or they can be started by running commands in a Python virtual environment.
121
154
122
155
### Prerequisites
123
156
@@ -129,11 +162,25 @@ To run the backend locally with docker and docker-compose you will need:
129
162
130
163
- docker 20.10.14+
131
164
- docker-compose 1.29.2
132
-
- Python 3.9 (if not using docker)
165
+
- Python 3.9+ (if not using docker)
166
+
167
+
Run the following command to check your local versions:
133
168
134
-
Recommended:
169
+
```
170
+
make check
171
+
```
172
+
173
+
It should show something like:
174
+
175
+
```
176
+
Docker version 20.10.14, build a224086
135
177
136
-
- Redis Insights
178
+
docker-compose version 1.29.2, build 5becea4c
179
+
180
+
Python 3.10.2
181
+
182
+
Node v16.16.0
183
+
```
137
184
138
185
### Local installation
139
186
@@ -179,6 +226,8 @@ Next you can start the three services in different windows. Before starting each
179
226
source .env/bin/activate
180
227
```
181
228
229
+
For advanced usage, please see the [`Makefile`](/Makefile) which has some helpful targets for starting different parts of the application (redis-stack, backend services and client).
230
+
182
231
**Start the Flask API server**
183
232
184
233
```
@@ -253,6 +302,4 @@ Before starting `celerybeat`, make sure that you have deleted a file called `cel
253
302
254
303
The client runs on `http://localhost:3000`. It makes API and websocket connections with the backend which runs on `http://localhost:8000`.
255
304
256
-
## Deployment
257
-
258
-
To make deploys work, you need to create free account on [Redis Cloud](https://redis.info/try-free-dev-to)
305
+
Please see the [Makefile](/Makefile) for a full list of commands for running the application locally.
0 commit comments