WebSocket ve Redis ile Gerçek Zamanlı (Real-Time) Dashboard Mimarisi

Kullanıcılarınıza verilerin yenilenmesi için "sayfayı yenile" butonuna basmalarını söylemek artık kabul edilemez. Canlı Borsa panelleri, IoT cihaz takip ekranları veya anlık analiz sunan her modern dashboard gerçek zamanlı çalışmalıdır.

REST API (Polling) Neden Yetersiz?

Klasik yöntemde front-end (React/Next.js) her 5 saniyede bir backend'e GET /api/stats isteği atar (Short Polling). Eğer 10,000 aktif kullanıcınız varsa bu saniyede 2,000 HTTP isteği demektir. Sunucu trafiğiniz çöpe gider, gereksiz TCP handshake'leri yaşanır ve maliyetler artar.

Çözüm: WebSocket bağlantısı kurarak istemci ile sunucu arasında çift yönlü, sürekli açık ve hafif bir tünel açmak.

Mimarinin Kalbi: Redis Pub/Sub

Bir WebSocket sunucusu ayağa kaldırdığınızda, uygulamanız yatayda büyüdükçe (Örneğin arkada 5 ayrı container/pod çalışırken) büyük bir sorun ortaya çıkar: A kullanıcısı Node1'e, B kullanıcısı Node2'ye bağlıdır. Node1'de gerçekleşen bir olayı Node2'deki kullanıcılara nasıl ileteceksiniz?

İşte burada devreye Redis Pub/Sub (Publish/Subscribe) girer. Tüm WebSocket node'ları Redis'teki belirli bir kanalı (Örn: dashboard-updates) dinler. Herhangi bir node bir değişiklik ürettiğinde bunu Redis'e fırlatır, Redis bunu tüm node'lara saniyenin binde biri hızında dağıtır!

// Örnek Redis Subscriber (Node.js backend)
import { createClient } from 'redis';
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });
const subscriber = createClient();

await subscriber.connect();
await subscriber.subscribe('dashboard-updates', (message) => {
  // Gelen veriyi o an bağlı olan tüm WebSocket istemcilerine fırlat
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(message);
    }
  });
});

React Tarafında Performans Optimizasyonu

WebSocket'ten saniyede yüzlerce veri paketi akarken, React state'ini (Örn: setChartData()) her milisaniyede güncellemek tüm sayfanın kasmasına (UI freeze) neden olur.

Throttle (Kısma) Tekniği: Gelen verileri anında React state'ine basmak yerine bir havuzda (buffer/ref) toplarız ve saniyede yalnızca 1 veya 2 kez UI'ı render ederiz.

import { useEffect, useRef, useState } from 'react';
import throttle from 'lodash/throttle';

export function RealtimeChart() {
  const [data, setData] = useState([]);
  const dataBuffer = useRef([]);

  useEffect(() => {
    const ws = new WebSocket('wss://api.saas.com/realtime');
    
    // UI'ı saniyede en fazla 2 kez güncelle
    const updateUI = throttle(() => {
      setData([...dataBuffer.current]);
    }, 500);

    ws.onmessage = (event) => {
      const payload = JSON.parse(event.data);
      dataBuffer.current.push(payload);
      updateUI(); // Throttle ile korunuyor
    };

    return () => ws.close();
  }, []);

  return <ChartView data={data} />;
}

Sonuç

WebSocket ve Redis Pub/Sub ikilisi, modern sistemlerde yatay olarak sonsuz ölçeklenebilen gerçek zamanlı bir mimari kurmanın en güvenilir yoludur. React tarafındaki doğru throttle teknikleriyle birleştiğinde kullanıcılara inanılmaz pürüzsüz bir "Live" deneyim sunabilirsiniz.