Building a collaborative genealogy canvas like Kinova requires an architectural design capable of broadcasting hundreds of live cursor coordinates and canvas node position updates per second.

Persisting every micro drag coordinate directly into a relational database creates severe database I/O bottlenecks.

1. Dual-Channel Architecture

To solve this, we decoupled our network traffic into two dedicated pathways:

  1. REST API Channel: Handles permanent database mutations (adding family members, deleting relations, or editing biographical profiles).
  2. WebSocket Channel (Laravel Reverb): Handles ephemeral live multiplayer events such as cursor positions and transient canvas drag events (whispering).
graph LR
    UserA[User A - React Flow] -->|Drag Node Event| WSS[Laravel Reverb WebSocket]
    WSS -->|Broadcast Whispering| UserB[User B - React Flow]
    UserA -->|Final Position Save| API[Laravel REST API]
    API -->|Write Database| PG[(PostgreSQL 16)]

Kinova Family Tree Canvas Workspace

2. Why Choose Laravel Reverb?

Prior to Laravel Reverb, WebSocket implementation in PHP typically required paid third-party vendors (like Pusher) or standalone Node.js Socket.io microservices.

Laravel Reverb provides a native, high-performance PHP WebSocket engine:

  • Zero Third-Party Costs: Runs self-hosted on your VPS inside Docker containers.
  • Client-to-Client Whispering: Allows browsers to exchange ephemeral cursor telemetry instantly without hitting PHP queue workers.
  • Unified Authentication: Private channel authorization is seamlessly integrated with existing Laravel authentication middleware.

Multi-Generational Canvas Exploration

3. Frontend React Flow Performance Optimizations

On the client application, rendering large family tree graphs with hundreds of nodes is optimized with:

  • Zustand Transient State Updates: Updates visual DOM coordinates directly without triggering expensive React component tree re-renders during active drag gestures.
  • Debounced Position Persistence: Sends REST API save requests only when the user finishes dragging a node (idle / drag stop).

The synergy between Laravel Reverb and React Flow delivers an instantaneous, responsive multiplayer canvas experience while keeping server overhead remarkably low.