React Native’de Laravel Reverb ve react-native-reverb ile Gerçek Zamanlı Olay Yönetimi

Son güncelleme: 5 Haziran 2026 21:32

React Native ve Laravel ile yapılan uygulamalar için gerçek zamanlı güncellemeler artık çok daha kolay. Mobil platformda gerçek zamanlı güncellemeleri sağlamak, geçmişte sorunlu ya da neredeyse imkansızdı. Ancak react-native-reverb paketi ile Laravel’in Reverb WebSocket sunucusu ile React Native istemcisi arasında uyumlu bir köprü kuruluyor. Bu, vendor lock-in olmadan, gerçek bir self-hosting çözümü sunuyor ve Laravel Echo ile tam API uyumluluğu sağlıyor. Aşağıda, kurulum adımları, çalışan bir örnek ve geliştirme iş akışında nelerin değişeceği yer alıyor.

<h2>
    <a name="what-is-reactnativereverb-and-why-does-it-matter" href="#what-is-reactnativereverb-and-why-does-it-matter"></a>
    react-native-reverb nedir ve neden önemlidir?
</h2>

<p>2024'ten önce, mobil uygulamalarda "Laravel gerçek zamanlı" deneyimi hayal gücüne dayanıyordu. Pusher’in web SDK'sı React Native üzerinde yerel olarak çalışmıyordu ve resmi mobil SDK, Pusher'ın barındırdığı sunuculara bağlıydı. Laravel Reverb ise self-hosting bir WebSocket sunucusu olarak piyasaya sürüldü, ancak React Native ekipleri bunun dışında bırakıldı. react-native-reverb, hem iOS hem de Android için Reverb’in Pusher protokolü üzerinde çalışan yerel bir TurboModule istemcisi ile bu boşluğu kapatıyor.</p>

<ul>
    <li><strong>Kendi Reverb sunucunuza bağlanır, 3. parti bir buluta değil.</strong></li>
    <li><strong>Özel kanal kimlik doğrulama ve olay ayrıştırmayı kutudan çıkarır.</strong></li>
    <li><strong>Promise tabanlı API — eski köprü veya kırılgan sarıcılar yok.</strong></li>
    <li><strong>Yüzde yüz self-hosting: alt yapınızı kontrol edin, vendor lock yok.</strong></li>
    <li><strong>Gerçek olay eşleşmesi: sipariş güncellemeleri, canlı bildirimler ve Laravel'in yayınladığı her şey.</strong></li>
</ul>

<p>Bu sayede, Laravel Echo’nun gerçek zamanlı gücü mobil yığınınızda yerel olarak işleniyor; genel, özel ve bildirim olayları (<code>notifyNow</code>, <code>theNotifiable</code> trait) minimum zorlukla geliyor.</p>

<p><strong>Özetle:</strong> react-native-reverb, React Native uygulamanızda birinci sınıf gerçek zamanlı özelliği sunarken, tüm Laravel yayın özelliklerine Pusher ya da geçici çözümler gereksinimi olmadan entegre olmanıza imkan tanıyor.</p>

<h2>
    <a name="what-challenges-does-reactnativereverb-solve-in-react-native-laravel-apps" href="#what-challenges-does-reactnativereverb-solve-in-react-native-laravel-apps"></a>
    react-native-reverb, React Native Laravel uygulamalarında hangi zorlukları çözüyor?
</h2>

<p>Bu sürüm öncesi acı noktaları ciddi ve zaman kaybettiriciydi. Laravel Reverb kullanmak istiyorsanız ama mobil ihtiyacı varsa, ya "neredeyse çalışır" bir deneyim ya da protokol hack'lerine kaybedilen haftalarla karşılaşıyordunuz.</p>

<ul>
    <li><strong>Pusher React Native SDK:</strong> Sadece Pusher'ın bulutuna bağlanır. Eğer Reverb çalıştırıyorsanız (gizlilik veya maliyet nedeniyle), dışarıdasınız.</li>
    <li><strong>Manuel WebSocket istemcileri:</strong> Tabii ki denemek mümkün, ama kanal çoklama, Pusher protokolü, Laravel kimlik doğrulama akışları, olay şekli uyumunu yeniden yapılandırmanız gerekecek. Bu tür gereksinimler alttan kayar, küçük bir arka uç değişikliğinde bozulur ve prod'da başınızı ağrıtır.</li>
</ul>

<p>react-native-reverb, Laravel ekosisteminde sağlam bir yer edinmiştir. API, Laravel Echo ile uyumlu; kimlik doğrulama ve kanal abonelikleri, web uygulamanızda zaten yaptığınız işlemleri yansıtır. Arka uç beklentileri değiştikçe her seferinde yeniden çalıştırmak yerine, ekosistem-native bir entegrasyon elde edersiniz.</p>

<p><strong>Özet:</strong> Geliştirme sürenizi tasarruf eder, kod kaymalarını azaltır ve tüm platformlarda kimlik doğrulama ve olay mantığını tutarlı tutarsınız.</p>

<h2>
    <a name="how-to-set-up-reactnativereverb-for-laravel-reverb-realtime-integration" href="#how-to-set-up-reactnativereverb-for-laravel-reverb-realtime-integration"></a>
    Laravel Reverb gerçek zamanlı entegrasyonu için react-native-reverb nasıl kurulur?
</h2>

<p>React Native mobil uygulamanız ile Laravel arka uç arasında çalışan bir gerçek zamanlı bağlantıya sahip olmak istiyorsanız, işte yapılması gerekenler:</p>

<p><strong>Ön koşullar:</strong></p>

<ul>
    <li>Laravel 10+ arka uç, Laravel Reverb etkinleştirilmiş (2024+ itibarıyla).</li>
    <li>React Native için çalışır durumda bir Node.js araç zinciri.</li>
    <li>Özel kanallar için API kimlik doğrulama akışı (örn. Laravel Sanctum, Passport).</li>
</ul>

<p><strong>Adım 1: react-native-reverb'i projenize yükleyin</strong><br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>npm install react-native-reverb

veya

yarn add react-native-reverb

<p>react-native-reverb, React Native’in TurboModule altyapısını kullandığı için, uyumlu bir RN versiyonunda (tipik olarak 0.71+, ancak sorun yaşarsanız depo ile doğrulayın) olduğunuzdan emin olun.</p>

<p><strong>Adım 2: Laravel Reverb'i etkinleştirip yapılandırın</strong></p>

<p>Laravel <code>.env</code> dosyanızda yayın yapmayı ve Reverb sunucusunu ayarlayın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight plaintext"><code>BROADCAST_DRIVER=reverb

REVERB_APP_ID=your-app-id
REVERB_KEY=your-reverb-key
REVERB_SECRET=your-reverb-secret
REVERB_HOST=ws.yourdomain.com
REVERB_PORT=443
REVERB_SCHEME=wss

<p>Gerekirse reverb yapılandırmasını yayınlayın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>php artisan vendor:publish --tag="reverb-config"

<p>Reverb sunucunuzu başlatın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>php artisan reverb:start

<p>Laravel artık tüm olayları WebSocket sunucusuna yayınlayabilir.</p>

<p><strong>Adım 3: React Native'de react-native-reverb kullanarak Laravel Echo'yu yapılandırın</strong></p>

<p>Artık bir tarayıcı WebSocket istemcisi kullanmanıza gerek yok; bunun yerine <code>react-native-reverb</code> istemcisini RN kodunuzda başlatın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight typescript"><code>import { Echo } from 'react-native-reverb';

const echo = new Echo({
host: “ws.yourdomain.com:443”,
key: “your-reverb-key”,
auth: {
headers: {
Authorization: Bearer YOUR_API_KEY,
},
},
scheme: “wss”,
});

<p>Artık <code>.channel()</code>, <code>.private()</code>, <code>.listen()</code> gibi Laravel Echo’nun API'lerine erişiminiz var.</p>

<p><strong>Adım 4: Özel/varlık kanalları için kimlik doğrulama</strong></p>

<p>Özel veya varlık kanalları için API jetonunuz ya da çerez oturumunuzun ayarlanmış olmasını sağlayın (genellikle <code>authEndpoint</code> ile kullanıcı oturumu veya JWT üzerinden). İstemci, Echo ile aynı kimlik doğrulama son noktasını kullanır, böylece arka uç mantığı birleştirilir.</p>

<p><strong>Kontrol listesi:</strong></p>

<ul>
    <li>[x] react-native-reverb paketi yüklendi ve bağlandı</li>
    <li>[x] Laravel Reverb sunucusu çalışıyor ve erişilebilir</li>
    <li>[x] Kimlik doğrulama son noktası doğru kullanıcı durumunu döndürüyor</li>
</ul>

<p><strong>Bir durum:</strong> Reverb host'unuzun (<code>ws.yourdomain.com</code>) mobil ağlar üzerinden erişilebilir olduğundan emin olun (geliştirme, test, prod için geçerli).</p>

<p><strong>Özet:</strong> Dakikalar içinde güvenilir, Laravel yerel gerçek zamanlı güncellemeler elde edersiniz; protokol tahminleri yok, web sarmaları yok.</p>

<h2>
    <a name="how-do-i-implement-live-order-status-tracking-using-reactnativereverb" href="#how-do-i-implement-live-order-status-tracking-using-reactnativereverb"></a>
    react-native-reverb kullanarak anlık sipariş durumu takibi nasıl uygulanır?
</h2>

<p>Laravel'den React Native uygulamasına gerçek zamanlı sipariş durumu güncellemelerini (kargoya verildi, teslimat aşamasında, teslim edildi) en az kod ile gönderelim.</p>

<p><strong>Adım 1: Arka uç olay ve kanal</strong></p>

<p>Önce Laravel'de bir yayın olayı oluşturun:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>// app/Events/OrderUpdated.php

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class OrderUpdated implements ShouldBroadcast
{
use InteractsWithSockets;

public $order;

public function __construct($order)
{
    $this->order = $order;
}

public function broadcastOn()
{
    return ['order.' . $this->order->id];
}

public function broadcastWith()
{
    return [
        'id' => $this->order->id,
        'status' => $this->order->status,
        // diğer yükler
    ];
}

}

<p>Bu olayı sipariş durumu değiştiğinde yayınlayın.</p>

<p><strong>Adım 2: Kontrolör/hizmette yayınlama</strong><br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight php"><code>event(new OrderUpdated($order));

<p><strong>Adım 3: Ön yüz — Sipariş güncellemelerini dinlemek</strong></p>

<p>React Native ekran/bileşeninizde:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight typescript"><code>import React, { useEffect, useState } from 'react';

import { Echo } from ‘react-native-reverb’;

const echo = new Echo({
host: “ws.yourdomain.com:443”,
key: “your-reverb-key”,
auth: {
headers: {
Authorization: Bearer ${userToken},
},
},
scheme: “wss”,
});

function useOrderStatus(orderId: number) {
const [status, setStatus] = useState(null);

useEffect(() => {
const channel = echo.channel(order.${orderId});
channel.listen(‘OrderUpdated’, (payload: any) => {
setStatus(payload.status);
});

return () => {
  echo.leaveChannel(`order.${orderId}`);
};

}, [orderId]);

return status;
}

<p>Kullanıcı arayüzü bileşeni ile entegre edin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight tsx"><code>const status = useOrderStatus(orderId);

return Order Status: {status};

<p><strong>İpuçları:</strong></p>

<ul>
    <li>Gerçek zamanlı değer gelene kadar bir yükleyici/geri dönme durumu render edin.</li>
    <li>Eğer uzun süreli arka plan güncellemeleri bekliyorsanız (örn. teslimat durumu), API'den bağlantı durumunu izleyip görüntüleyin.</li>
    <li>Mobil pil/ağ dayanıklılığı için durum güncellemelerini geciktirin ve gezinme ayrıldığında dinleyicileri temizleyin.</li>
</ul>

<p><strong>Özet:</strong> Laravel arka ucu durumu bir kez doğru bir şekilde bildirir; web ve mobil istemciler gerçek zamanlı olarak senkronize olur, aynı yayın olaylarını kullanır ve tekrar eden kablolar yok.</p>

<h2>
    <a name="performance-and-reliability-what-to-expect-from-reactnativereverb" href="#performance-and-reliability-what-to-expect-from-reactnativereverb"></a>
    Performans ve güvenilirlik: react-native-reverb'den ne beklemeliyim?
</h2>

<p>React Native TurboModules üzerinde çalışan react-native-reverb, eski JS-nativeden köprülemenin yükünü ve gecikmesini ortadan kaldırır. Her iki platform için yerel bağlamalar sayesinde, verim ve bant genişliği, arka ucunuzun WebSocket limitleriyle eşleşir, yapay bir engel oluşturmaz.</p>

<ul>
    <li>
        <strong>Gecikme:</strong> Doğrudan WS bağlantısı — vekil yok, Pusher bulut geçişi yok. Pusher’ın mobil SDK'dan anlamlı ölçüde daha düşük uçtan uca olay süresi (orta makalenin iddialarına göre).</li>
    <li>
        <strong>Ölçeklenebilirlik:</strong> Yerel taraf, yönetmeyle kanalları ve dinleyicileri temizler; böylece arka planda uygulama açıkken hayalet olayları görmezsiniz.</li>
    <li>
        <strong>Kimlik doğrulama güvenilirliği:</strong> Laravel Echo’nun duyurusu ile eşleşir; böylece olay bütünlüğü ve kullanıcı gizliliği korunur.</li>
    <li>
        <strong>Tekrar bağlantılar:</strong> Mobilde standart yeniden bağlantı mantığı düzgün bir şekilde devreye girer; gelişmiş uç durumları için işletim sistemi düzeyindeki ağ olaylarını kullanın.</li>
    </ul>

<p>Başarısızlık direncine önem veriyorsanız, analitik olay tekrar oynatma veya kritik iş akışları için bildirim yedekleri ile bunu birleştirin.</p>

<p><strong>Özet:</strong> Yerel performans ve daha düşük gecikme süresi, olayların anlık olarak hissedilmesine ve kaynak kullanımının düşmesine neden olur — özellikle eski cihazlarda veya büyük ölçeklerde.</p>

<h2>
    <a name="where-to-find-more-resources-and-support-for-reactnativereverb-laravel-integration" href="#where-to-find-more-resources-and-support-for-reactnativereverb-laravel-integration"></a>
    react-native-reverb Laravel entegrasyonu hakkında daha fazla kaynak ve destek nerede bulunabilir?
</h2>

<p>Daha derinlemesine dalmak mı istiyorsunuz? İşte sonraki adımlar:</p>

<ul>
    <li>
        <strong>Resmi GitHub deposu:</strong> Yükleme, API belgeleri, sorunlar için.</li>
    <li>
        <strong>Laravel belgeleri:</strong> Yayınlama, Reverb yapılandırması, kanal güvenliği.</li>
    <li>
        <strong><a href="https://medium.com/@azlanali076/real-time-magic-in-react-native-connecting-to-laravel-reverb-with-react-native-reverb-3dca123774d0" target="_blank" rel="noopener noreferrer">React Native'da Gerçek Zamanlı Büyü</a>:</strong> Paket yazarından adım adım geçiş ve gerekçeler.</li>
    <li>
        <strong>Topluluk:</strong> Laravel forumları, React Native Discord ve Stack Overflow ile eş destek ve sorun çözümü.</li>
    <li>“Laravel Echo kanal kimlik doğrulama mobil” ve “React Native yayın olayları” aramaları, özel akışları entegre ederken veya kimlik doğrulama sınır durumlarıyla ilgilenirken aktif Soru-Cevap dizileri sunar.</li>
</ul>

<p>Pratik kılavuzlar arıyorsanız, hata izlerinizi “React Native” + “Laravel Reverb” + hata kodu ile aratın — çoğu yüzeysel sorun daha önce halka açık duruma gelmiştir.</p>

<h2>
    <a name="how-to-use-it-today" href="#how-to-use-it-today"></a>
    Bugün nasıl kullanılır?
</h2>

<p>Gerçek zamanlı mobil güncellemeleri göndermeye hazır olan herkes için üstten aşağı bir tarif:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code># Arka uç

composer require laravel/reverb
php artisan vendor:publish –tag=”reverb-config”
php artisan reverb:start

Mobil

npm install react-native-reverb

veya

yarn add react-native-reverb

<p>React Native'de echo istemcisini ayarlayın:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight typescript"><code>import { Echo } from 'react-native-reverb';

const echo = new Echo({
host: “ws.yourdomain.com:443”,
key: “your-reverb-key”,
auth: {
headers: {
Authorization: Bearer ${userToken},
},
},
scheme: “wss”,
});

<p>Güncellemeleri dinleyin:<br/></p>

<div class="highlight js-code-highlight">
    <pre class="highlight typescript"><code>echo.channel('order.42').listen('OrderUpdated', payload => console.log(payload.status));

React Native’de Laravel Reverb ve react-native-reverb ile Gerçek Zamanlı Olay Yönetimi

veya

Mobil

veya

Sanal Medya

Son Eklenenler

Grand Theft Auto VI Oyun Dünyasında Tarihleri Değiştiriyor

Microsoft’un Mojo’su Geri Mi Gidiyor? AI ve Yenilikler Ne Diyor?

Donanım Dünyası: Computex 2026, 4. Gün – B2B Değişimi ve Taipei’ye Veda

Guild Wars 3 Geliyor, MMORPG Dünyasında Yenilikler Sunuyor

N++ Ekibinin Geri Dönüşü: Çok Oyunculu Devam Oyunu Geliyor

Müzik Oyunları Dünyasında Fırtına Yaratacak Mr. Records

Siber güvenlik, yapay zeka ve savunma sanayiinden; finans ve sinema dünyasına uzanan geniş bir yelpaze. Teknomers; teknoloji, strateji ve yazılım dünyasını sade bir dille sizlerle buluşturuyor.

Kurumsal

Kategoriler

Populer