Belajar WebSocket - Live Dashboard & Data Streaming

#Pendahuluan

Dashboard monitoring adalah wajah aplikasi real-time yang paling terlihat: grafik bergerak, angka berubah, peringatan muncul. Tapi dashboard yang buruk adalah dosa — grafik yang dirender 60 kali per detik membekukan browser, dan angka yang telat adalah kebohongan.

Episode 22 membahas live dashboard & data streaming: menerima update frekuensi tinggi, memilih pola streaming yang tepat, mengintegrasikan chart library, dan menjaga browser tetap mulus di tengah ribuan titik data.

#Kebutuhan Dashboard Real-Time

#Beban Data yang Berbeda

Tidak semua dashboard sama. Pahami dulu karakteristiknya:

Trading chart : puluhan update per detik
Monitoring    : satu hingga beberapa per detik
Log viewer    : burst, lalu hening
Analytics     : satu per menit sudah cukup

Beban menentukan arsitektur: trading butuh batching dan sampling, log viewer butuh antrean yang tidak menumpuk. Dashboard yang memaksa semua data ke semua klien akan runtuh sendiri.

#Data Streaming Patterns

#Delta dan Snapshot

Ada dua cara mengirim update: snapshot penuh atau delta.

Pola delta update

const snapshot = {
  type: "snapshot",
  data: semuaPoin,
};
 
const delta = {
  type: "delta",
  data: { harga: 1023, pada: Date.now() },
};

snapshot dikirim sekali saat klien terhubung — berisi state penuh. Setelah itu hanya delta: perubahan kecil yang mengganti nilai. Pola ini menghemat bandwidth berlipat dibanding mengirim seluruh dataset setiap update.

#Chunking Data Besar

Snapshot yang besar dipecah menjadi beberapa frame agar tidak memblokir event loop dan socket.

Kirim snapshot ber-chunk

function kirimChunk(socket, data) {
  const ukuran = 1000;
  for (let i = 0; i < data.length; i += ukuran) {
    socket.emit("snapshot:chunk", data.slice(i, i + ukuran));
  }
  socket.emit("snapshot:selesai");
}

data.slice(i, i + ukuran) mengirim 1000 titik per frame. Klien menunggu event snapshot:selesai lalu merender seluruh data sekaligus.

#Integrasi Chart Library

#Chart.js dengan Update Real-Time

Chart.js cocok untuk dashboard yang update beberapa kali per detik.

Update Chart.js real-time

const chart = new Chart(ctx, {
  type: "line",
  data: { labels: [], datasets: [{ data: [] }] },
});
 
ws.onmessage = (event) => {
  const d = JSON.parse(event.data);
  chart.data.labels.push(d.label);
  chart.data.datasets[0].data.push(d.nilai);
  if (chart.data.labels.length > 60) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }
  chart.update();
};

chart.data.datasets[0].data.push(d.nilai) menambah titik baru, shift() membuang titik tertua sehingga hanya 60 titik terakhir dirender. Ini contoh windowing: tampilkan jendela bergulir, bukan seluruh riwayat.

#D3 untuk Data Rapat

D3.js lebih fleksibel untuk visualisasi kompleks dan dataset besar. Kuncinya: jangan menyerahkan render penuh ke D3 setiap update — gunakan pattern update yang hanya memindahkan elemen yang berubah.

#Optimasi Rendering

#Throttle Update Visual

Browser merender sekitar 60 frame per detik. Update data yang datang 200 kali per detik harus di-throttle.

Throttle update grafik

let terakhir = 0;
 
ws.onmessage = (event) => {
  const kini = performance.now();
  if (kini - terakhir < 100) return;
  terakhir = kini;
  prosesUpdate(JSON.parse(event.data));
};

kini - terakhir < 100 membatasi pemrosesan visual maksimal 10 kali per detik. Data tetap diterima penuh, tapi render dipertahankan pada kecepatan yang manusiawi untuk dilihat.

#Web Worker untuk Pemrosesan

Agregasi dan transformasi data berat sebaiknya tidak dijalankan di thread utama.

Delegasi agregasi ke Web Worker

const worker = new Worker("aggregator.js");
 
ws.onmessage = (event) => {
  worker.postMessage(event.data);
};
 
worker.onmessage = (event) => {
  renderChart(event.data);
};

worker.postMessage(event.data) mengirim data mentah ke worker, dan hasil agregasi dikembalikan ke thread utama hanya untuk dirender. Thread utama tetap sibuk merender UI, bukan menghitung.

#Penutup

Episode 22 membuat dashboard yang jujur dan mulus: pola delta yang hemat, snapshot yang ter-chunk, windowing yang menjaga memori, dan throttling yang melindungi browser.

Inti yang harus dibawa pulang:

• Frekuensi data menentukan arsitektur dashboard.
• Kirim snapshot sekali lalu delta untuk hemat bandwidth.
• Pecah snapshot besar menjadi chunk yang tidak memblokir.
• Chart.js bagus untuk update ringan, D3 untuk visualisasi kompleks.
• Throttle render mengikuti kemampuan mata, bukan kecepatan data.
• Web Worker memindahkan pemrosesan berat dari thread utama.

Di episode 23 berikutnya kita membangun multiplayer game basics: server otoritatif, sinkronisasi state game, input handling, mitigasi latensi, dan optimasi khusus game.