Build a browser-based multiplayer Tetris game using serverless Dapr APIs

Intro

This article describes how to build a retro-style multiplayer Tetris game using open source Dapr and the free Diagrid Catalyst, a cloud service that offers serverless APIs for messaging, data and workflows.

When you start building distributed applications, the development process can be tedious and slow since you need to think about implementing synchronous or asynchronous communication, and cross-cutting concerns such as resiliency, security, and observability. With Diagrid Catalyst, you can speed up this process since you benefit from the unified APIs and best practices that open source Dapr offers, and now you can use these APIs from any compute environment. This enables you to build and integrate back-end services quickly while staying flexible, since you can swap out message brokers and key/value stores without changing your application code.

Architecture

Game service

The game service is written in Go. It manages the game session lifecycle and responds to player events sent via Socket.IO. The service uses two Dapr APIs: service invocation and pub/sub messaging. The game service publishes the game results to the users service via pub/sub messaging. The front-end uses p5js, a JavaScript library, to create visuals and games.

Users service

The users service is written in Python, using Flask as the web framework. This service uses the Dapr State Management API for storing usernames and game session data. The users service also uses the Dapr service invocation API to communicate with the game service to register a new game.

Since Diagrid Catalyst provides the serverless APIs for messaging and state, you only need to take care of hosting the two services. In the following section, the services will run locally in a DevContainer, and they will communicate with the Diagrid cloud to enable service discovery, pub/sub messaging, and key/value store access.

Running the game locally

This section covers the steps to run the project locally. It involves some prerequisites that you need to install, getting the source code from GitHub, the creation of Diagrid Catalyst resources, updating a Diagrid dev config file, and installing Python requirements.

Prerequisites

To be able to run this project locally, you need to have the following:

• Docker Desktop
• VSCode with the DevContainers extension
• A Diagrid Catalyst account (currently in early access and free)

Get the source code

1. Fork this repo, and clone it to your local machine.

2. Open the repo in VSCode, use the supplied DevContainer as VSCode suggests.

• Opening the repo in a DevContainer will install some utilities as well as the Diagrid CLI, which is required in the next steps. Wait until everything is installed before continuing.

Create the Diagrid Catalyst resources

Use the Diagrid CLI in the DevContainer to create the Diagrid Catalyst resources as follows:

1. Login into Diagrid using the CLI and follow the instructions:
   diagrid login
2. Create a Catalyst project that includes a managed pub/sub broker and key-value store:
   diagrid project create catalyst-tetris --deploy-managed-pubsub --deploy-managed-kv
3. Set this project as the default for the upcoming commands:
   diagrid project use catalyst-tetris
4. Create an App ID for the game and users services:
   diagrid appid create game
diagrid appid create users
5. You can use the list command to status of the created App IDs:
   diagrid appid list
6. Since the project is created with a managed pub/sub broker and key-value store, you can use the connection command to list these connections:
   diagrid connection list
7. Create a subscription for the pub/sub connection that will trigger the update-score endpoint in the users service:
   diagrid subscription create pubsub --connection pubsub --topic scoreupdates --route /update-score --scopes users
8. List the subscriptions to see the status of the subscription:
   diagrid subscription list

Generate the Diagrid dev config file

Once all the Diagrid Catalyst resources have been created, run the following command to generate the Diagrid dev config file in the root of the repo:

diagrid dev scaffold

This results in a dev-catalyst-tetris.yaml file in the root of the repo. This file contains app connection details for the game and users services. Some attributes are provided such as DAPR_API_TOKEN, DAPR_APP_ID, and endpoints provided by Catalyst.

You need to update the following attributes for both the game and the users service:

• appPort
• command
• workDir

The users service also requires a FLASK_KEY environment variable to be set, any string value will do.

Copy the values from yaml snippet below.

- appId: game
  appPort: 8001
  env:
    DAPR_API_TOKEN: 
    DAPR_APP_ID: game
    DAPR_GRPC_ENDPOINT: 
    DAPR_HTTP_ENDPOINT: 
  workDir: game
  command: ["go", "run", "main.go"]
- appId: users
  appPort: 8002
  env:
    DAPR_API_TOKEN:
    DAPR_APP_ID: users
    DAPR_GRPC_ENDPOINT:
    DAPR_HTTP_ENDPOINT:
    FLASK_KEY: "12345678"
  workDir: users
  command: ["python3", "app.py"]
appLogDestination: ""

Install the Python dependencies

The final step is to install the Python dependencies for the users service. This can be done by running the following commands in the terminal:

1. Create a Python virtual environment
   python3 -m venv env
source env/bin/activate
2. Install Python requirements
   pip3 install -r users/requirements.txt

Run the services

Now you can start both services via the Diagrid CLI:

diagrid dev start

Once the services are running and connected to the Diagrid cloud, you can open a browser and navigate to http://localhost:5000 to play the game. You can open a second browser window in private mode to simulate another player.

Using the Catalyst dashboard

After playing a game, go to the Catalyst dashboard and navigate around to see the App Graph, API Logs, and the API Explorer.

‍

What next?

Subscribe to the Diagrid YouTube channel to learn more about Dapr open source and how to use serverless Dapr APIs to build distributed applications. Do you have questions about Diagrid Catalyst? Join the Diagrid community on Discourse to ask your questions and share what you're building.