Membangun kanvas visual kolaboratif seperti Kinova membutuhkan arsitektur sinkronisasi yang mampu menangani ratusan pembaruan koordinat kursor dan posisi node per detik secara real-time.

Jika setiap pergeseran node (drag event) langsung disimpan ke database SQL, beban I/O server akan melonjak drastis (bottleneck).

1. Arsitektur Komunikasi Dua Arah

Untuk menyelesaikan tantangan ini, kami membagi lalu lintas data menjadi dua kanal:

  1. REST API Channel: Digunakan untuk aksi mutasi permanen (menambah anggota keluarga, menghapus relasi, atau mengedit biodata).
  2. WebSocket Channel (Laravel Reverb): Digunakan murni untuk ephemeral live events seperti pergerakan kursor dan koordinat kanvas sementara (whispering).
graph LR
    UserA[Pengguna A - React Flow] -->|Drag Node Event| WSS[Laravel Reverb WebSocket]
    WSS -->|Broadcast Whispering| UserB[Pengguna B - React Flow]
    UserA -->|Final Position Save| API[Laravel REST API]
    API -->|Write Database| PG[(PostgreSQL 16)]

Tampilan Kanvas Silsilah Keluarga Kinova

2. Mengapa Memilih Laravel Reverb?

Sebelum Laravel Reverb hadir, opsi WebSocket di ekosistem PHP biasanya memerlukan server pihak ketiga seperti Pusher (berbayar) atau Node.js Socket.io terpisah.

Reverb memberikan solusi WebSocket native PHP yang berkinerja tinggi:

  • Zero Third-Party Cost: Berjalan mandiri di VPS menggunakan container Docker.
  • Client-to-Client Whispering: Fitur whisper memungkinkan pertukaran koordinat antar browser secara instan tanpa perlu memproses event listener di PHP worker.
  • Seamless Laravel Auth: Otentikasi channel privat langsung terintegrasi dengan middleware auth Laravel yang sudah ada.

Eksplorasi Kanvas Multi-Generasi

3. Optimasi React Flow di Sisi Frontend

Di sisi client React, manipulasi ribuan node pohon keluarga dioptimalkan dengan:

  • Zustand Transient Updates: Memperbarui koordinat visual secara langsung ke DOM canvas tanpa memicu re-render berlebihan di seluruh pohon komponen React.
  • Debounced Position Persist: Hanya mengirim request simpan posisi ke API backend setelah pengguna melepas kursor (drag stop / idle).

Kombinasi Laravel Reverb dan React Flow menghasilkan pengalaman kolaborasi silsilah keluarga yang instan, responsif, dan hemat resource server.