Gerçek Zamanlı Laravel: Livewire ile Canlı Gösterge Panelleri, Bildirimler ve Sohbet Oluşturma

Birçok web uygulaması, kullanıcı etkileşimleriyle statik görünümden gerçek zamanlı bir deneyime dönüşebilir. Örneğin, kullanıcı bir form gönderdiğinde, sayfanın başka bir yerinde bir sayaç otomatik olarak güncellenebilir — sayfa yenilemesi olmadan, döngüye girmeden ve JavaScript çerçevelerinin karmaşası olmadan. Bu, gerçek zamanlı kullanıcı arayüzünün vaadi ve Laravel ekosisteminde Livewire, tanıdık backend-first iş akışını terk etmeden bu hedefe ulaşmayı mümkün kılıyor.

Bu makalede Livewire kullanarak üç pratik gerçek zamanlı model tarif edilecektir: canlı bildirimler, işbirlikçi sayaçlar (gösterge panoları gibi) ve temel bir sohbet arayüzü. Her biri bir öncekine dayanarak inşa edilecek ve sonunda Livewire’ı ne zaman kullanacağınız ile Laravel Echo ve WebSockets ile ne zaman entegre etmeniz gerektiği konusunda net bir zihinsel model oluşturacaksınız.

Livewire’da “Gerçek Zamanlı” Ne Anlama Geliyor?

Livewire, varsayılan olarak WebSockets kullanmaz. Altında AJAX kullanır — her bileşen etkileşimi bir sunucu gidiş-dönüş işlemi tetikler. Birçok kullanım senaryosunda (form doğrulama, canlı arama, UI durumunu değiştirme) bu, gerçek zamanlı hissettirecek kadar hızlıdır.

Gerçek yayına dayalı gerçek zamanlı senaryolar — yani sunucunun kullanıcı eylemi olmadan istemciye veri göndermesi — Laravel Echo ile birlikte Reverb (2024 itibarıyla Laravel’in ilk taraf seçeneği), Pusher veya Ably gibi bir WebSocket sürücüsü gerektirir.

Hangi aracın hangi senaryoya uyduğunu bilmek, gereksiz karmaşıklıktan kaçınmanıza yardımcı olur.

Model 1: Livewire ile Canlı Arama

Basit bir örnekle başlayalım. Her tuş vuruşunda otomatik olarak sonuçları filtreleyen bir arama girişi oluşturacağız — sayfa yenilemesine gerek yok.

// app/Livewire/ProductSearch.php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Product;

class ProductSearch extends Component
{
    public string $query = '';

    public function render()
    {
        $products = Product::when($this->query, function ($q) {
            $q->where('name', 'like', '%' . $this->query . '%');
        })->limit(10)->get();

        return view('livewire.product-search', compact('products'));
    }
}

Burada wire:model.live.debounce.300ms direktifi önemli bir işlev görüyor — kullanıcının yazmayı durdurduktan sonra 300ms bekliyor ve ardından isteği tetikliyor. Debounce uygulanmadığında, her tuş vuruşu sunucuya ulaşır.

Model 2: Reverb ve Echo ile Bildirim Yayını

Şimdi gerçek zamanlı bir itme senaryosuna geçelim. Bir kullanıcı bir sipariş tamamladığında, admin panelindeki sayaç canlı olarak artıyor — admin sayfayı yenilemeden.

Adım 1: Laravel Reverb’i yükleyin ve yapılandırın

php artisan install:broadcasting

Bu, Reverb’i kurar, Echo’yu yükler ve BroadcastServiceProviderı ayarlar. .env dosyanıza değerlerinizi ekleyin:

BROADCAST_CONNECTION=reverb
REVERB_APP_ID=your-app-id
REVERB_APP_KEY=your-app-key
REVERB_APP_SECRET=your-app-secret
REVERB_HOST=localhost
REVERB_PORT=8080

Adım 2: Yayınlanabilir bir olay oluşturun

// app/Events/OrderPlaced.php
namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class OrderPlaced implements ShouldBroadcast
{
    public function __construct(public int $totalOrders) {}

    public function broadcastOn(): Channel
    {
        return new Channel('dashboard');
    }

    public function broadcastAs(): string
    {
        return ;
    }
}

Adım 3: Bir Livewire bileşeninde dinleyin

// app/Livewire/OrderCounter.php
namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\On;

class OrderCounter extends Component
{
    public int $count = 0;

    public function getListeners()
    {
        return [
            => ,
        ];
    }

    public function refreshCount($event)
    {
        $this->count = [];
    }

    public function render()
    {
        return view();
    }
}

 class="text-4xl font-bold text-center">
    {{ $count }} Orders Today

Uygulamanızın bir kısmı event(new OrderPlaced($totalOrders)) tetiklendiğinde, Livewire bileşeni anında yanıt verir — o kanala bağlı her tarayıcı sekmesinde.

Model 3: Basit Çok Kullanıcılı Sohbet

Sohbet, klasik WebSocket kullanım durumudur. İşte minimum ama işlevsel bir uygulama.

// app/Livewire/ChatRoom.php
namespace App\Livewire;

use Livewire\Component;
use App\Models\Message;
use App\Events\MessageSent;

class ChatRoom extends Component
{
    public string $newMessage = ;
    public $messages;

    public function mount()
    {
        $this->messages = Message::with()->latest()->take(50)->get()->reverse();
    }

    public function getListeners()
    {
        return [
            => ,
        ];
    }

    public function loadMessages()
    {
        ->= Message::with()->latest()->take(50)->get()->reverse();
    }

    public function sendMessage()
    {
        ->validate([=> ]);

        = auth()->user()->messages()->create([
            => ->newMessage,
        ]);

        broadcast(new MessageSent())->toOthers();

        ->newMessage = ;
        ->loadMessages();
    }

    public function render()
    {
        return view();
    }
}

Yayında gönderilen mesajın .toOthers() çağrısına dikkat edin — bu, mesajı gönderenin kendi yayın yankısını almasını engeller, çünkü Livewire zaten loadMessages() ile UI’yi optimistik olarak güncellemiştir.

Performans Dikkate Alınması Gerekenler

Gerçek zamanlı özellikleriniz ölçeklendikçe aklınızda bulundurmanız gereken bazı noktalar:

Debounce kullanımını agresif şekilde yapın. Her wire:model.live debouncesuz bir sunucu hitsidir. Metin girdileri için .debounce.300ms veya .debounce.500ms kullanın.

Perceived performance için wire:loading kullanın. 200ms’lik bir sunucu gidiş dönüş işlemi hemen bir yükleniyor göstergesi gösterdiğinizde hızlı hissedilir.

 wire:click="sendMessage" wire:loading.attr="disabled">
     wire:loading.remove>Gönder
     wire:loading>Gönderiliyor...

Yayın dinleyicilerini dikkatlice sayfalayın. Eğer bir paylaşılan kanala binlerce kullanıcıya yayın yapıyorsanız, gürültüyü azaltmak için varlık kanalları veya yetkilendirilmiş özel kanallar düşünün.

Yayınlarınızı sıraya alın. Olaylarınızı ShouldBroadcastNow ile işaretleyerek hemen gönderebilir veya ölçek için sıraya koyabilirsiniz:

class MessageSent implements ShouldBroadcast
{
    // Varsayılan olarak kuyruğu kullanır — HTTP isteği için hızlı, yayın için asenkron
}

Livewire Yeterli Olmadığında

Livewire birçok işlevi karşılar, ancak bazı senaryolar, özelleştirilmiş bir JavaScript çerçevesinin daha uygun olabileceği durumlardır: oldukça etkileşimli kanvas tabanlı kullanıcı arayüzleri, karmaşık sürükle-bırak editörleri veya çevrimdışı yeteneklerin önemli olduğu uygulamalar. Bu sınır, Livewire olgunlaştıkça belirsiz hale geliyor, ancak dikkate almaya değer. Karmaşık bir ürün için mimarinin değerlendirilmesi gerektiğinde, bu kalıplarla sıkça çalışan geliştiricilerden ikinci bir görüş almak için inceleyebilirsiniz — buradaki ekip, üretimde birden fazla gerçek zamanlı Laravel uygulaması geliştirdi ve sizin özel gereksinimlerinize göre doğru yaklaşımı belirlemenize yardımcı olabilir.

Sonuç

Laravel’deki gerçek zamanlı özellikler, backend-first iş akışını terk etmeyi ya da tam bir JavaScript çerçevesi takmayı gerektirmiyor. Livewire, AJAX tabanlı reaktivite model sayesinde etkileşimli kullanıcı arayüzü ihtiyaçlarının çoğunu karşılar ve gerçek sunucu itişine ihtiyaç duyduğunuzda Laravel Reverb ve Echo, aynı bileşen yapısına temiz bir şekilde entegre olur.

Önemli çıkarım: Kullanıcı tetiklemeli etkileşim için wire:model.live ile başlayın ve yalnızca sunucunun güncellemeyi başlatması gerektiğinde yayını düşünün. Bu ayrımın doğru yapılması, mimarinizi temiz ve kod tabanınızı sürdürülebilir tutmaya yardımcı olur.