A "multiplayer" HTML5 <canvas> to which people can connect and make changes over time.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Rob Colbert 9fb7566c77 more how it's done 2 years ago
.vscode first usable 2 years ago
app first usable 2 years ago
client first usable 2 years ago
.gitignore first usable 2 years ago
.jshintrc running app 2 years ago
README.md more how it's done 2 years ago
canvas-io-server.js first usable 2 years ago
package.json first usable 2 years ago
webapp.js first usable 2 years ago
webpack.config.js first usable 2 years ago
yarn.lock first usable 2 years ago


Multiplayer Canvas

An HTML5 <canvas> to which multiple people can connect over Socket.io and make changes one pixel at a time.

Running the Application

yarn start

How It Works

A connect token is generated when the multiplayer canvas view is loaded, and this becomes the session's ID. The client must present this token when connecting to the canvas IO server, and it must match what was stored in Redis, not be expired, not already be claimed, etc.

If accepted, the socket session then stores the connect token to be used as a unique key that identifies that client session. Rate limits are implemented against this key using rate-limiter-flexible, such as how often a setpixel command can be received and processed.

The client will then request the image from the server, which will respond with the raw image data of the in-memory bitmap. The client paints this to it's canvas, then allows the client to request changes.

The client is free to send setpixel events as often as it likes, but the server will be configured with a rate limiter to limit the number of pixels that can be changed per client per unit of time. The default is 10 pixels per minute per client device. The client does not update the image in response to a mouse click. Instead, the client sends the change request to the server, and responds to messages from the server to update the image.

When a setpixel command is received, the in-memory image is altered and then everyone observing the image is informed of the update including the sender. This way, everyone observing an image receives the same state for the image, and everyone sees the same image.