Laravel (Reverb) ve React ile Google Dokümanları Tarzı Gerçek Zamanlı Gösterge Tablosu Oluşturma

Problem: B2B Karar Alma Sürecinde Eski Veri Sorunu

B2B SaaS ve endüstriyel yönetim platformları gibi yüksek riskli alanlarda, eski veriler yalnızca bir rahatsızlık değil; kritik bir tıkanıklık oluşturur. Birden fazla paydaş aynı analitik gösterge panosunu görüntülerken, kararlar canlı ve eşzamanlı duruma dayalı olarak alınmalıdır. Kullanıcı A kritik bir envanter metriğini güncellediğinde, kullanıcı B bu değişikliği anında, manuel sayfa yenilemesine gerek kalmadan görmelidir. Geleneksel anket yöntemleri (API uç noktasına tekrar tekrar istek gönderme), kaynak açısından yoğundur, kabul edilemez gecikmelere neden olur ve modern işletme uygulamalarının gerektirdiği yük altında ölçeklenmeyi başaramaz.

Çözüm: Olay Tabanlı Gerçek Zamanlı Mimari

Gerçekten etkileşimli ve iş birliği yapan ortamlar oluşturmak için, bir İstek/Cevap modelinden Olay Tabanlı modele geçmeliyiz. 2026 Laravel ekosisteminde, bu, Laravel uygulamaları için özel olarak tasarlanmış birinci parti, yüksek performanslı WebSocket sunucusu olan Laravel Reverb kullanılarak zahmetsizce gerçekleştirilir. Bir React ön yüzü ile bir araya getirildiğinde (Inertia.js aracılığıyla entegre veya ayrık bir istemci olarak), pürüzsüz bir senkronizasyon katmanı oluştururuz.

Mimari Analiz

İş akışı dört temel bileşene dayanıyor:

1. Arka Uç Olayı: ShouldBroadcast arayüzünü uygulayan standart bir Laravel olayı.
2. Yayınlama Sürücüsü (Reverb): Olayı kabul eden ve yükü bağlı istemcilere yayınlayan WebSocket sunucusu.
3. Varlık Kanalları: Veri değişimlerini takip etmemizi sağlar ve ayrıca *kimlerin* şu anda bir bileşeni görüntülediğini veya etkileşimde bulunduğunu takip eder (bir “Google Docs” benzeri farkındalık yaratır).
4. Ön Yüz Dinleyici (React Echo): Kanallara abone olmak ve bir olay alındığında bileşen durumunu dinamik olarak güncellemek için Laravel Echo kullanan bir React hook’u.

Kapsamlı Kod Uygulama Kılavuzu

Adım 1: Laravel Olay Yapılandırması ( `app/Events/InventoryUpdated.php` )

Arka uç olayımız yükü işler ve güvenli kanalı tanımlar.

namespace App\Events;
use App\Models\Inventory;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel; // Kullanıcı farkındalığı için
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class InventoryUpdated implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $inventory;
public $userId;

/ 
 * Yeni bir olay örneği oluşturun.
 */
public function __construct(Inventory $inventory, $userId)
{
    $this->inventory = $inventory;
    $this->userId = $userId; // Değişiklik yapan kişiyi geç
}

/ 
 * Olayın yayınlanacağı kanalları alın.
 */
public function broadcastOn(): array
{
    // Belirli depo gösterge panosunun varlık kanalını kullan
    return [
        new PresenceChannel('warehouse.' . $this->inventory->warehouse_id),
    ];
}

/ 
 * Ön yüze gönderilecek özel yük.
 */
public function broadcastWith(): array
{
    return [
        'id' => $this->inventory->id,
        'stock_level' => $this->inventory->stock_level,
        'updated_by' => $this->userId,
    ];
}
}
Adım 2: Arka Uç Tetikleyici (Bir Servis veya Kontrolcü)
Envanter modeli güncellendiğinde, yayını gerçekleştiren olayı tetikleriz.

// app/Services/InventoryService.php içinde
public function updateStockLevel(Inventory $inventory, int $newLevel)
{
// 1. Karmaşık doğrulama ve güncelleme mantığını gerçekleştir...
$inventory->update(['stock_level' => $newLevel]);
// 2. Gerçek zamanlı yayını tetikle
// Ön yüz farkındalığı için değişikliği yapan kullanıcı ID'sini geç
event(new InventoryUpdated($inventory, auth()->id()));
}
Adım 3: React Ön Yüz Hook’u ( `hooks/useInventoryRealtime.js` )
Bu hook, WebSocket bağlantısını yönetir, kanala abone olur ve bileşene kullanıcı varlığı verilerini sağlar.

import { useEffect, useState } from 'react';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js'; // Echo, Pusher uyumlu bir istemci gerektirir
// Echo'nun küresel olarak veya bir sağlayıcı içinde başlatıldığından emin olun
window.Pusher = Pusher;
const echoInstance = new Echo({
broadcaster: 'reverb',
key: import.meta.env.VITE_REVERB_APP_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: import.meta.env.VITE_REVERB_PORT,
forceTLS: false, // Yerel veya iç ağ geliştirmesi için
enabledTransports: ['ws', 'wss'],
});
export const useInventoryRealtime = (warehouseId) => {
const [liveInventory, setLiveInventory] = useState([]);
const [activeUsers, setActiveUsers] = useState([]);
useEffect(() => {
    if (!warehouseId) return;

    // 1. Güvenli Varlık Kanalına abone ol
    const channel = echoInstance.join(`warehouse.${warehouseId}`)
        // Kimlerin burada olduğunu takip et
        .here((users) => {
            setActiveUsers(users);
        })
        // Yeni bir paydaş geldiğinde takip et
        .joining((user) => {
            setActiveUsers((prev) => [...prev, user]);
            console.log(`${user.name} gösterge panosuna katıldı.`);
        })
        // Bir paydaş ayrıldığında takip et
        .leaving((user) => {
            setActiveUsers((prev) => prev.filter(u => u.id !== user.id));
        })
        // 2. InventoryUpdated olay yükünü dinle
        .listen('.InventoryUpdated', (eventPayload) => {
            console.log('Gerçek zamanlı stok güncellemesi alındı:', eventPayload);
            // Yerel durumu anında güncelleyin, yenileme olmadan
            setLiveInventory((prev) => 
                prev.map(item => item.id === eventPayload.id ? { ...item, stock_level: eventPayload.stock_level } : item)
            );
        });

    // 3. Bileşen unmount olduğunda bağlantıyı temizle
    return () => {
        echoInstance.leave(`warehouse.${warehouseId}`);
    };
}, [warehouseId]);

// Başlangıç veri yüklemesi genellikle Inertia veya useQuery aracılığıyla gerçekleşir,
// ve setLiveInventory orada başlatılır.

return { liveInventory, setLiveInventory, activeUsers };
};
Daha Derin Teknik Faydalar
Laravel Reverb ve React kullanarak gerçek zamanlı senkronizasyona geçiyor olmamız, dayanıklı B2B ürünleri için kritik olan birkaç önemli avantaj sağlar:
 Kurumsal Düzeyde Kullanıcı Deneyimi: Tüm paydaşlar arasında anında veri tutarlılığı, platform güvenilirliğine büyük kullanıcı güveni inşa eder.
 Yüksek Derecede Optimize Edilmiş Sunucu Kaynakları: Sürekli anket yerine, WebSocket’ler her bir istemci için tek bir sürekli bağlantı kullanır. Bu, arka uç API yükünü ve veritabanı sorgu yükünü önemli ölçüde azaltarak, makul altyapı ile binlerce eşzamanlı B2B kullanıcısına hizmet vermenizi sağlar.
 Varlık Farkındalığı: Hangi paydaşların şu anda bir gösterge panosunda “aktif” olduğunu bilmek, çakışma hatalarını önler (örneğin, iki yönetici aynı müşteri kaydını düzenlerken) ve sorunsuz iş birliği iş akışlarını kolaylaştırır.
Sonuç
Statik veri sunumundan dinamik, olay tabanlı iş birlikçi bir ortama geçiş, modern bir B2B SaaS platformunun belirleyici bir gereksinimidir. Laravel Reverb’i kullanmak, reaktif durum yönetimi ile bir araya geldiğinde, SmarTech Devs’in ölçeklenebilir, dünya standartlarında iş birliği deneyimleri oluşturmasını sağlayan sağlam ve yerel bir altyapı katmanı sağlar.
        </div>
 Kaynak: Orijinal Makale