Ringkasan Eksekutif: Untuk menskalakan WebSockets ke jutaan pengguna bersamaan, saya menggunakan arsitektur Hub-and-Spoke Golang yang dikelola di memori, sementara Vue.js 3 menangani state sinkronisasi klien. Pendekatan ini menghilangkan polling REST yang mahal dan secara eksponensial mengurangi beban database.
Membangun aplikasi web real-time yang mensinkronisasi data melintasi ribuan klien serentak adalah salah satu tantangan paling sulit dalam software engineering modern. 'Hanya pakai WebSockets' adalah saran yang buruk jika Anda tidak memahami cara menskalakan lapisan koneksi.
Mengapa REST Polling Tumbang
Dalam inkarnasi awal dari sebagian besar dasbor B2B (termasuk proyek RTIMS yang saya kerjakan), pengembang mengandalkan client-side polling. Aplikasi React atau Vue di-set untuk memanggil endpoint REST setiap 5 detik. Untuk 100 pengguna, ini mungkin 20 panggilan per detik. Mudah.
Namun, ketika diskalakan ke 5.000 klien aktif, itu berarti 1.000 panggilan API masuk setiap detiknya. Setiap panggilan ini harus melewati lapisan middleware HTTP, deserialisasi framework, hingga melakukan kueri ke PostgreSQL. Ini membunuh database dan menghabiskan memori server dengan sangat cepat, meskipun tidak ada data aktual yang berubah.
Memasukkan Go (Golang) dan Arsitektur Hub
Go dibangun dari bawah ke atas untuk menangani konkurensi. Tidak seperti Node.js yang single-threaded atau PHP yang memerlukan proses per request, Go dapat membuka puluhan ribu goroutine dengan overhead memori yang sangat kecil (sekitar 2KB per goroutine).
Kami menggunakan pola Hub-and-Spoke standar. Satu goroutine pusat bertindak sebagai 'Hub' yang memelihara registry semua klien yang terhubung secara thread-safe menggunakan sync.Mutex. Saat mutasi terjadi melalui sistem eksternal, payload JSON didorong ke saluran siaran (broadcast channel) Hub. Hub lalu menyebarkan pesan ini ke masing-masing goroutine klien, yang mendorongnya ke koneksi TCP yang mendasarinya.
Manajemen State Klien dengan Vue.js 3
Mengirimkan data dari server hanyalah setengah dari pertempuran. Begitu payload JSON yang mengalir tanpa henti ini menghantam frontend, lapisan UI Anda dapat tersedak jika tidak dikelola dengan benar. Ini adalah saat Composition API Vue.js 3 (dengan reaktivitas berbasis Proxy) bersinar.
Alih-alih merombak seluruh struktur DOM setiap kali pembaruan WebSocket datang (yang akan menyebabkan UI lag parah), kami menggunakan Pinia stores dengan injeksi state reaktif. Ketika WebSocket menerima payload tipe 'INVENTORY_UPDATE', ia langsung memutasi objek spesifik di dalam Pinia array. Reaktivitas presisi tinggi Vue memastikan bahwa hanya baris tabel persis yang mengalami pembaruan yang akan merender ulang (re-render), sementara ribuan node DOM lainnya tetap statis.
Kesimpulan: Jangan Asal Pakai Sockets
Meskipun WebSockets memberikan pengalaman pengguna yang seolah magis, mereka membawa kerumitan stateful ke backend. Menggabungkan efisiensi thread mentah Go dengan sistem reaktivitas cerdas Vue.js memungkinkan Anda membangun aplikasi tingkat enterprise yang nyata dan hidup, tanpa menyebabkan server terbakar habis.