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.
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.
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.
- Clone or fork this repo.
- Rename the
api\local.settings.json.example
file toapi\local.settings.json
. - Copy/paste the Ably API key in the
ABLY_APIKEY
field in thelocal.settings.json
file. - Run
swa start
in the root folder.
The local Static Web App should be available at http://localhost:4280
.
Want to help contributing to this project? Have a look at our contributing guide!