Room Interaction

How Rooms Work

SparkLumina rooms are built on Socket.IO, a battle-tested WebSocket library that provides low-latency bidirectional communication between the server and all connected clients. When you create a room, the backend assigns a unique room ID and establishes a Socket.IO namespace for that room. Anyone who joins with the same room ID receives the same real-time event stream.

To start collaborating, create a room from the welcome screen. The system generates a short alphanumeric room ID (e.g., abc123). Share this ID or the full URL (e.g., https://your-app.com/?room=abc123) with your team. No sign-up is required—join via browser and you’re in.

Real-Time Sync

Every stroke, shape, text edit, and deletion is broadcast through Socket.IO events. The server emits canvas-change when canvas state updates, and clients apply remote-changes to their local Excalidraw scene. Elements are synchronized incrementally: only deltas (new, updated, or deleted elements) are transmitted, not the full scene. This keeps bandwidth low and latency minimal even with many collaborators.

Live Cursors

When a collaborator moves their pointer, their cursor position is sent to the server and broadcast to other clients. Each user sees a labeled cursor (often with a name or color) so everyone knows who is working where. Live cursors are especially useful during brainstorming sessions when you want to point at specific areas or follow a colleague’s focus.

Version-Based Conflict Resolution (LWW)

Concurrent edits can conflict when two users modify the same element at the same time. SparkLumina uses a Last-Writer-Wins (LWW) strategy: each element carries a version identifier. When updates arrive, the client compares versions and keeps the most recent one. This simple rule ensures deterministic merging without complex operational transforms (OT) or CRDTs, while remaining practical for typical whiteboard use.

Auto-Reconnect

Network hiccups happen. If a client temporarily loses connection, the Socket.IO client automatically attempts to reconnect. Once reconnected, the client requests the latest canvas state and merges any missed changes. Users can continue working; the system handles recovery transparently.

Use Cases

Team brainstorming: Create a room, invite colleagues, and sketch ideas together. Live cursors and real-time sync make it feel like everyone is at the same whiteboard.

Classroom collaboration: A teacher creates a room and shares the link. Students join and contribute answers, annotations, or drawings on the shared canvas. Everyone sees updates instantly—no refresh needed.