Draw Together: Building a Multiplayer Sketch Game with Daphne, NextJS & OpenAI!

Let's use the OpenAI API to build a multiplayer sketching game!

In this guide, we'll build a Django and NextJS app that allows two players to connect and share a sketch. OpenAI will supply the drawing prompts that we'll give to the players.

If you're more of a visual learner, I've also made a video where I give an overview of the tutorial.

Django App Setup

Creating the Django project.

django-admin startproject djdoodle
cd djdoodle/
python3 manage.py startapp core

Updating the djdoodle/settings.py file to add the core application.

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
]

Creating the requirements.txt file.

Django==4.1.7
daphne==4.0.0
channels==4.0.0
channels-redis==4.1.0
websockets==11.0.3
openai==1.6.1

Creating the Docker file for the Django app.

FROM python:3.11

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

WORKDIR /usr/src/app

COPY requirements.txt /usr/src/app/

RUN pip install --no-cache-dir -r requirements.txt

COPY . /usr/src/app/

RUN mkdir -p /usr/src/app/

Now we'll create the initial docker-compose.yml to manage the containers. We'll eventually add NextJS, but let's start with Django.

version: "3.7"

services:
  daphne:
    build:
      context: .
    command: daphne -b 0.0.0.0 -p 8000 djdoodle.asgi:application
    ports:
      - "8000:8000"
    volumes:
      - $PWD:/usr/src/app

The build and context keys tell Compose that it can find our Dockerfile in the current directory.

Building the Django app image.

docker-compose build

Running the initial version as a test.

docker-compose up -d
docker ps

You should see output similar to this.

CONTAINER ID   IMAGE              COMMAND                  CREATED         STATUS        PORTS                                       NAMES
555ef0c2ad40   djdoodle-daphne   "daphne -b 0.0.0.0 -…"   2 seconds ago   Up 1 second   0.0.0.0:8000->8000/tcp, :::8000->8000/tcp   djdoodle-daphne-1

NextJS App Setup

Inside the base project directory, create the NextJS application.

Name the app djdoodle-ui and select JavaScript as the language when prompted.

npx create-next-app@latest

Creating the Dockerfile for the NextJS app. The file should be under the djdoodle-ui directory.

FROM node:18-alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY . .

CMD ["npm", "run", "dev"]

Now we update the docker-compose.yml file to include the NextJS app.

version: "3.7"

services:
  daphne:
    build:
      context: .
    command: daphne -b 0.0.0.0 -p 8000 djdoodle.asgi:application
    ports:
      - "8000:8000"
    volumes:
      - $PWD:/usr/src/app

  nextjs:
    build:
      context: ./djdoodle-ui
    ports:
      - "3000:3000"
    volumes:
      - $PWD/djdoodle-ui:/usr/src/app

Build and start the new NextJS image. Run the following in the project base directory.

docker-compose build
docker-compose up -d

You should now be able to access Django at http://localhost:8000 and NextJS at http://localhost:3000 with your browser.

Integrating Django and NextJS

Next we need to allow NextJS and Django to communicate.

We'll use NGINX to present the entire application on one network port. NGINX will proxy requests to Django or NextJS based on the URL path.

Open nginx.conf and add the following.

server {
    listen 80;

    location /api {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://daphne:8000;
    }

    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://nextjs:3000;
    }
}

Now update the docker-compose.yml file.

version: "3.7"

services:
  daphne:
    build:
      context: .
    command: daphne -b 0.0.0.0 -p 8000 djdoodle.asgi:application
    volumes:
      - $PWD:/usr/src/app

  nextjs:
    build:
      context: ./djdoodle-ui
    volumes:
      - $PWD/djdoodle-ui:/usr/src/app

  nginx:
    image: nginx:latest
    ports:
      - "8000:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - $PWD:/usr/src/app

Now you should be able to visit http://localhost:8000 and http://localhost:8000/api to see NextJS and Django respectively.

Adding Django Channels

The Django Channels package, which handles websockets, uses Redis to store connection and message data.

We need to update settings.py to tell django-channels where to find Redis.

The ASGI_APPLICATION variable must also be declared. We'll add the djdoodle/asgi.py file in a moment.

WSGI_APPLICATION = "djdoodle.wsgi.application"                                            
ASGI_APPLICATION = "djdoodle.asgi.application"                                            

CHANNEL_LAYERS = {                                                                         
    "default": {                                                                           
        "BACKEND": "channels_redis.core.RedisChannelLayer",                                
        "CONFIG": {                                                                        
            "hosts": [(os.environ["REDIS_HOST"], 6379)],                                   
            "capacity": 1500,                                                              
        },                                                                                 
    },                                                                                     
}

Django Channels uses Redis to store message data.

We'll update docker-compose.yml to include a Redis image and add an environment variable to the daphne container.

version: "3.7"

services:
  daphne:
    build:
      context: .
    command: daphne -b 0.0.0.0 -p 8000 djdoodle.asgi:application
    environment:
      - REDIS_HOST=redis
    volumes:
      - $PWD:/usr/src/app
    depends_on:
      - redis

  nextjs:
    build:
      context: ./djdoodle-ui
    volumes:
      - $PWD/djdoodle-ui:/usr/src/app

  redis:
    image: redis:latest
    ports:
      - "6379:6379"

  nginx:
    image: nginx:latest
    ports:
      - "8000:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - $PWD:/usr/src/app

Implementing the Game Server Logic

Create a new directory to contain the async server logic.

mkdir core/ws_consumers

Add the following to the core/ws_consumers/draw.py module.

import json
import asyncio

from django.conf import settings
from openai import OpenAI

from channels.generic.websocket import AsyncWebsocketConsumer

client = OpenAI(api_key=settings.OPENAI_API_KEY)

# An initial message to send to OpenAI that explains the concept of the
# game and the kind of responses we want.
system_prompt = """
There is a game in which two players both work to complete a simple drawing
according to a series of prompts that build on one another.

Each player receives a series of distinct prompts.  The prompts should be
related in that they both apply to the same drawing, but the prompts
should be designed so that they apply to different parts of the drawing.

For instance, one player might receive a series of prompts around drawing
the sky, while the other player is drawing the ground.  This is only an example.
Please generate your own theme.

Please generate two series of prompts in JSON format, one for each player.

The JSON should have a player1 key and a player2 key.  The value of each key
should be an array of strings.
"""


class DrawConsumer(AsyncWebsocketConsumer):
    # The game prompts are fetched from OpenAI when the first player connects.
    # We need to avoid re-fetching when the second player connects, and also
    # make sure both players are sent their prompts at the same time.
    # The first player to connect will acquire the fetch_lock while the second
    # player will block on fetch_lock until the prompts are ready.
    fetch_lock = asyncio.Lock()

    prompts_fetched = False

    countdown_time = 30
    countdown_active = False

    # Track the connection count as an easy way to know which set of prompts
    # to send when a new connection is established.
    connection_count = 0

    player1_prompts = []
    player2_prompts = []

    async def start_countdown(self):
        """
        Starts a countdown timer and sends an update of how many seconds
        remain to each connected Websocket client.

        The timer will restart when it reaches zero.
        """
        if not DrawConsumer.countdown_active:
            DrawConsumer.countdown_active = True
            while DrawConsumer.countdown_time > 0:
                await asyncio.sleep(1)
                await self.channel_layer.group_send(
                    "draw_group",
                    {
                        "type": "countdown_message",
                        "countdown": DrawConsumer.countdown_time,
                    },
                )
                DrawConsumer.countdown_time -= 1

                if DrawConsumer.countdown_time == 0:
                    DrawConsumer.countdown_time = 30

    async def fetch_prompts(self):
        """
        Fetch prompts from the OpenAI API.

        The first caller will trigger the API request while subsequent calls
        block on the fetch_lock, eventually returning immediately because the
        prompts_fetched bool has been set to True.
        """
        async with DrawConsumer.fetch_lock:
            if not DrawConsumer.prompts_fetched:
                DrawConsumer.prompts_fetched = True

                completion = client.chat.completions.create(
                    model="gpt-4-1106-preview",
                    response_format={"type": "json_object"},
                    messages=[
                        {
                            "role": "user",
                            "content": system_prompt,
                        }
                    ],
                )

                data = json.loads(completion.choices[0].message.content)

                DrawConsumer.player1_prompts = data["player1"]
                DrawConsumer.player2_prompts = data["player2"]

    async def connect(self):
        """
        Set up Websocket connection and make OpenAI request if this is the
        first connection.  Distributes prompts to players.
        """
        DrawConsumer.connection_count += 1

        await self.channel_layer.group_add("draw_group", self.channel_name)
        await self.fetch_prompts()

        await self.accept()

        prompts = [DrawConsumer.player1_prompts, DrawConsumer.player2_prompts]

        await self.send(
            text_data=json.dumps(
                {
                    "type": "prompts",
                    "prompts": prompts[DrawConsumer.connection_count % 2],
                }
            )
        )

        asyncio.create_task(self.start_countdown())

    async def disconnect(self, close_code):
        await self.channel_layer.group_discard("draw_group", self.channel_name)

    async def receive(self, text_data):
        """
        Broadcast messages received from one player back to themselves and to
        the other player in the game.
        """
        data = json.loads(text_data)
        await self.channel_layer.group_send(
            "draw_group", {"type": "draw_message", "message": data}
        )

    async def draw_message(self, event):
        message = event["message"]
        await self.send(text_data=json.dumps(message))

    async def countdown_message(self, event):
        countdown = event["countdown"]
        message = {"type": "countdown", "countdown": countdown}
        await self.send(text_data=json.dumps(message))

Now we'll wire up the routing for the DrawConsumer class. Open core/ws_routing.py and add the following.

from django.urls import path
from core.ws_consumers.draw import DrawConsumer

ws_urlpatterns = [
    path("api/ws/draw/", DrawConsumer.as_asgi()),
]

Update the djdoodle/asgi.py file so Daphne is aware of our DrawConsumer endpoint.

import os
from django.core.asgi import get_asgi_application

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "djdoodle.settings")

application = get_asgi_application()

from channels.routing import ProtocolTypeRouter, URLRouter
from core.ws_routing import ws_urlpatterns

application = ProtocolTypeRouter(
    {
        "websocket": URLRouter(ws_urlpatterns),
    }
)

For the above to work, you'll need to add your OpenAI API key to the settings.py file.

OPENAI_API_KEY = "your key here"

Implementing the NextJS UI

To get started, open djdoodle-ui/app/drawing.js and add the following.

This code will tie all the components together and manage communication with Django over the websocket.

"use client";
import React, { useState, useEffect, useRef } from "react";
import CanvasComponent from "./canvas";
import CountdownDisplay from "./countdown";
import ColorPicker from "./picker";
import Prompt from "./prompt";
import styles from "./drawing.module.css";

const startCountdown = 30;

const DrawingApp = () => {
  const [drawData, setDrawData] = useState([]);
  const [isPromptVisible, setIsPromptVisible] = useState(false);
  const [countdown, setCountdown] = useState(startCountdown);
  const [prompts, setPrompts] = useState([]);
  const [promptMessage, setPromptMessage] = useState("");
  const [color, setColor] = useState("#00ff00");
  const ws = useRef(null);

  useEffect(() => {
    // Show the prompt popup with the next prompt once
    // the timer rolls back around to 30 seconds.
    if (countdown == 30 && prompts.length) {
      setPromptMessage(prompts.shift());
      setIsPromptVisible(true);
    }
  }, [prompts, countdown]);

  useEffect(() => {
    if (!ws.current) {
      ws.current = new WebSocket(
        `ws://${window.location.hostname}:8000/api/ws/draw/`,
      );

      ws.current.onmessage = (event) => {
        const data = JSON.parse(event.data);

        if (data.type === "prompts") {
          setPrompts(data.prompts);
        } else if (data.type === "countdown") {
          setCountdown(data.countdown);
        } else {
          setDrawData((prevDrawData) => [...prevDrawData, data]);
        }
      };
    }

    return () => {
      if (ws.current) {
        ws.current.close();
        ws.current = null;
      }
    };
  }, []);

  const handleMouseEvent = (eventType, position) => {
    if (ws.current && ws.current.readyState === WebSocket.OPEN) {
      ws.current.send(JSON.stringify(position));
    }
  };

  return (
    <div>
      <CanvasComponent
        drawData={drawData}
        color={color}
        onMouseEvent={handleMouseEvent}
      />
      <div className={styles.picker}>
        <ColorPicker
          color={color}
          onColorChange={(newColor) => setColor(newColor)}
        />
      </div>
      <div className={styles.countdown}>
        <CountdownDisplay countdown={countdown} />
      </div>
      <div className={styles.prompt}>
        <Prompt
          message={promptMessage}
          isVisible={isPromptVisible}
          onDismiss={() => setIsPromptVisible(false)}
        />
      </div>
    </div>
  );
};

export default DrawingApp;

The child components include the HTML5 canvas, a countdown timer, a popup for the drawing prompt and a color picker.

Open djdoodle-ui/app/canvas.js and enter the following for the canvas component.

"use client";
import React, { useState, useRef, useEffect } from "react";

const CanvasComponent = ({ drawData, color, onMouseEvent }) => {
  const [isMouseDown, setIsMouseDown] = useState(false);
  const canvasRef = useRef(null);

  const drawBackground = (ctx, width, height) => {
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, width, height);
  };

  const drawCircle = (ctx, x, y, color) => {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, 12, 0, 2 * Math.PI);
    ctx.fill();
  };

  const handleMouseEvent = (event) => {
    if (isMouseDown) {
      const canvas = canvasRef.current;
      const rect = canvas.getBoundingClientRect();
      const position = {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top,
      };
      onMouseEvent(event.type, { color: color, ...position });
    }

    if (event.type === "mousedown") {
      setIsMouseDown(true);
    } else if (event.type === "mouseup") {
      setIsMouseDown(false);
    }
  };

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    drawBackground(context, canvas.width, canvas.height);

    drawData.forEach(({ x, y, color }) => {
      drawCircle(context, x, y, color);
    });
  }, [drawData]);

  useEffect(() => {
    const canvas = canvasRef.current;
    canvas.addEventListener("mousemove", handleMouseEvent);
    canvas.addEventListener("mousedown", handleMouseEvent);
    canvas.addEventListener("mouseup", handleMouseEvent);

    return () => {
      canvas.removeEventListener("mousemove", handleMouseEvent);
      canvas.removeEventListener("mousedown", handleMouseEvent);
      canvas.removeEventListener("mouseup", handleMouseEvent);
    };
  }, [isMouseDown]);

  return <canvas ref={canvasRef} />;
};

export default CanvasComponent;

Now we'll add the countdown timer in the djdoodle-ui/app/countdown.js file.

"use client";
import React from "react";
import styles from "./countdown.module.css";

const CountdownDisplay = ({ countdown }) => {
  return <div className={styles.countdown}>{countdown}</div>;
};

export default CountdownDisplay;

Open and update djdoodle-ui/app/prompt.js to create the Prompt component.

import React, { useState } from "react";
import styles from "./prompt.module.css";

const Prompt = ({ message, isVisible, onDismiss }) => {
  if (!isVisible) return null;

  return (
    <div className={styles.prompt}>
      <p>{message}</p>
      <button onClick={onDismiss}>OK</button>
    </div>
  );
};

export default Prompt;

Finally, we'll add the following to the djdoodle-ui/app/picker.js file to create the color picker component.

import React from "react";

const ColorPicker = ({ color, onColorChange }) => {
  const handleColorChange = (event) => {
    onColorChange(event.target.value);
  };

  return (
    <div>
      <input
        type="color"
        id="color-picker"
        name="color"
        value={color}
        onChange={handleColorChange}
      />
    </div>
  );
};

export default ColorPicker;

Next Steps

This has hopefully been a fun way to explore Daphne and websockets!

There are many ways to improve and build upon this simple example:

Add a game lobby where players are matched up
Add more drawing tools for the players
Improve the websocket communication to be more efficient
Make the app ready for a production deployment

You can view the full code for the app on GitHub.

While most of the code was shared here, a few parts such as CSS were omitted to make this guide shorter.

Blog