Architecture

Architecture

1. Client requests a new a new whiteboard via HTTP GET /whiteboard/create.
2. Whiteboard gets persisted in Database.
3. Backend responses to Client with reference to whiteboard (join-code).

---

1. Client requests an existing whiteboard with a join-code GET /whiteboard/{id}.
2. Backend retrieves existing whiteboard (including all existing objects on the whiteboard).
3. Backend responds with whiteboard.
4. Frontend redirects to whiteboard-page.
5. Objects from the whiteboard are drawn (enlivened) onto the fabric.js canvas.
6. Client joins socket.io room (via join-code) to receive live-updates from other connected clients

---

1. Client creates, updates or deletes an object on the fabric.js canvas.
2. Client sends the created, changed, updated object via socket.io to its connected room.
3. The created, updated or changed object gets in database.
4. The creation, update or change is send to all connected clients except sender.
5. On each client the received object gets rendered by the enliven-function of fabric.js.