Tokio Broadcast Loop
Pipes client canvas strokes to all active room subscribers.
Axum WebSockets Routing
Fast, concurrent connection handlers scaling without thread overhead.
SurrealDB Persistence
Stores drawings, cursors, and rooms database logs securely.
Pure Vanilla Canvas
Zero-dependency drawing engine running entirely on web standards.
Smart Action Undo
Maintains independent user action tracks for collaborative boards.
Whiteboard Development Process
From message protocol definitions to multi-user drawing sync and database snapshotting.
1.
Protocol
Define JSON packages for cursor coordinates, paint strokes, and text.
2.
Axum Server
Create room broadcast channels and shared database handlers.
3.
Vanilla Canvas
Implement vector drawing paths and pointer trace listeners.
4.
WebSocket Pipe
Synchronize client coordinate buffers via Axum channels.
5.
Persistence
Regularly flush room frames to SurrealDB for async room restoration.
Whiteboard Development Process
From message protocol definitions to multi-user drawing sync and database snapshotting.
01. Protocol
Define JSON packages for cursor coordinates, paint strokes, and text.
02. Axum Server
Create room broadcast channels and shared database handlers.
03. Vanilla Canvas
Implement vector drawing paths and pointer trace listeners.
04. WebSocket Pipe
Synchronize client coordinate buffers via Axum channels.
05. Persistence
Regularly flush room frames to SurrealDB for async room restoration.
Designing Ephemeral Real-Time Systems
Avoiding high-overhead brokers like Redis allows TheySynced to run as a single compiled binary while handling thousands of active concurrent connections.
DashMap allows safe, multi-threaded access to active whiteboard rooms directly from the Axum handler routines.
DashMap allows safe, multi-threaded access to active whiteboard rooms directly from the Axum handler routines.
High-Throughput Rust Backend
- Axum WebSockets routing filters
- Tokio broadcast channel queues
- DashMap thread-safe state directory
- SurrealDB query execution runtime
Reactive Client Canvas
- Vanilla JS vector trace rendering
- Client-side JWT session validation
- Auto-reconnect WebSocket socket state
- Custom collaborative cursor elements
Explore TheySynced in Action
Click on any screenshot to expand a full-screen interactive view.
