ably-labs/collaborative-pixel-drawing

A collaborative pixelart drawing carnvas to demonstrate pub/sub using Ably or Azure WebPubSub.

Collaborative pixelart drawing

Description

This repository contains an example how to synchronize state in realtime between many client devices using serverless WebSockets (Ably or Azure Web PubSub). The context of the example is a collaborative drawing canvas that multiple people can use at the same time to draw pixelart. The code in this repo is used in the blog post Cloud pubsub services compared: Azure Web PubSub vs Ably.

This repository contains two implementations of the same project:

• The main branch of this repo contains the implementation using Ably.
• The azure-web-pubsub branch contains the implementation using Azure Web PubSub.

This repository also contains a CodeTour for each of these branches, which you can use to navigate the code when you're using VSCode. You will be asked to download the CodeTour extension when you open the folder.

Tech stack

This project uses the following components:

• p5js; A creative coding library, used for the drawing canvas.
• Ably; A realtime messaging platform, used as the serverless WebSockets component.
• Azure Functions; A serverless compute service from Microsoft Azure.
• Azure Static Web Apps; An Azure service for hosting static websites.

The src folder contains the front-end files which are based on vanilla JavaScript and p5js.

The api folder contains a .NET 6 based Azure Function App with the following functions:

• ChangeColorPalette; returns a color palette based on the paletteId that is provided.
• CreateTokenRequest; provides an authentication token and is triggered when a connection to Ably is made via the front-end.

Building & running locally

Prerequisites

You require the following dependencies to run the solution locally:

• .NET 6 SDK. The .NET SDK required for the C# Azure Functions.
• Node 16. The JavaScript runtime required to install Azure Static WebApps CLI.
• Azure Static Web Apps CLI. This is the command line interface to develop and deploy Azure Static Web Apps. Install this tool globally by running this command in the terminal: npm install -g @azure/static-web-apps-cli.
• Azure Functions Core Tools. This is part of the Azure Functions extensions for VSCode that should be recommended for installation when this repo is opened in VSCode.
• Sign up for a free Ably Account, create a new app, and copy the API key.

Building the project

1. Clone or fork this repo.
2. Rename the api\local.settings.json.example file to api\local.settings.json.
3. Copy/paste the Ably API key in the ABLY_APIKEY field in the local.settings.json file.
4. Run swa start in the root folder.

The local Static Web App should be available at http://localhost:4280.

Contributing

Want to help contributing to this project? Have a look at our contributing guide!

More info

• Join our Discord server
• Follow us on Twitter
• Use our SDKs
• Visit our website

---