Merhabalar,


Bu yazıda Laravel'de Pusher kullanımından bahsedeceğim. Pusher ile gerçek zamanlı (realtime) işlemler yapabilirsiniz. Buna en güzel örnek olarak sohbet (chat) uygulaması verilebilir. Şimdi Pusher'ın en basit anlamda nasıl kullanılabileceğine dair örnek bir proje yapacağız.


Örnek projeyi Github üzerinden paylaştım. İndirip inceleyebilirsiniz:


Örnek Proje Linki


İlk olarak elbette boş bir Laravel projesi oluşturuyoruz:

composer create-project --prefer-dist laravel/laravel pusher-sample


Sonrasında https://pusher.com sitesine girerek kayıt olup giriş yapıyoruz. Merak etmeyin en azından örnek projemizi tamamlayabilecek kadar ücretsiz kullanıma sahibiz :)


Create new app e bastıktan sonra;

  • Name your app kısmına projemizin adını giriyoruz,
  • Select a cluster kısmını varsayılan ayarda (eu) bırakıyoruz,
  • Front-end teknolojisi olarak Jquery seçiyoruz,
  • Back-end teknolojisi olarak Laravel seçiyoruz

ve Pusher üzerinde uygulamamızı oluşturuyoruz.


Şimdi Pusher sitesinden almamız gereken kısımları alalım;


Getting Started bölümünde;


Add this to your client kısmının Javascript tabında yer alan kodu kopyalıyoruz. Laravel projemizde receiver.blade.php adında bir dosya oluşturup, kopyaladığımız kodu bu dosyaya yapıştırıyoruz.


receiver.blade.php:

<!DOCTYPE html>
<head>
  <title>Pusher Test</title>
  <script src="https://js.pusher.com/4.4/pusher.min.js"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('xxxxx', {
      cluster: 'eu',
      forceTLS: true
    });

    var channel = pusher.subscribe('my-channel');
    channel.bind('my-event', function(data) {
      alert(JSON.stringify(data));
    });
  </script>
</head>
<body>
  <h1>Pusher Test</h1>
  <p>
    Try publishing an event to channel <code>my-channel</code>
    with event name <code>my-event</code>.
  </p>
</body>


Add this to your server kısmının .env tabında yer alan kodu kopyalıyoruz. Laravel projemizde .env dosyamızı açıp ilgili yere yapıştırıyoruz. Burada dikkat etmeniz gereken üç şey var;

  • Pusher'dan aldığımız kodda yer alan çift tırnakların silinmesi
  • PUSHER_APP_CLUSTER kısmının eu olarak değiştirilmesi
  • BROADCAST_DRIVER kısmının pusher olarak değiştirilmesi


Sonuç olarak .env dosyamızın ilgili kısmı şu şekilde olmalı (x, y ve z olarak belirttiğim yerler sizin Pusher'dan aldığınız bilgiler olacak elbette)

...
BROADCAST_DRIVER=pusher
...
PUSHER_APP_ID=xxxxx
PUSHER_APP_KEY=yyyyyyyyyyy
PUSHER_APP_SECRET=zzzzzzzzzzz
PUSHER_APP_CLUSTER=eu


Artık Laravel tarafına odaklanabiliriz;


Amacımız bir adet gönderici (sender) ve bir adet alıcı (receiver) sayfası yapıp, gönderici kısmındaki input'a yazdığımız değerin alıcı kısmında görünmesini sağlamak.


Komut satırını açıp gerekli modülü kuruyoruz:

composer require pusher/pusher-php-server


Pusher'ın tetiklenmesi için FormSubmitted adında bir Event oluşturuyoruz:

php artisan make:event FormSubmitted


Bu event dosyamızın içeriğini şu şekilde dolduruyoruz;

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class FormSubmitted implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $text;

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

    public function broadcastOn()
    {
        return new Channel('my-channel');
    }

    public function broadcastAs()
    {
        return 'form-submitted';
    }
}

Böylece göndereceğimiz $text değerinin my-channel adlı kanala (channel) iletilmesini istediğimizi belirttik.


Şimdi de sender.blade.php adında bir dosya oluşturup içeriğini basit bir form ve iki adet input ile dolduruyoruz:

<form action="/sender" method="post">
    <input type="text" name="text">
    <input type="submit">
    {{ csrf_field() }}
</form>


receiver.blade.php dosyasında ufak değişiklikler yapıyoruz ve son hali şu şekilde oluyor;

<!DOCTYPE html>
<html>
<head>
    <title>Pusher Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://js.pusher.com/4.4/pusher.min.js"></script>
    <script>

      Pusher.logToConsole = true;

      var pusher = new Pusher('6cb615521933d9f977fc', {
        cluster: 'eu',
        forceTLS: true
      });

      var channel = pusher.subscribe('my-channel');
      channel.bind('form-submitted', function(data) {
        var node = document.createElement('li');
        var textNode = document.createTextNode(JSON.stringify(data.text));
        node.appendChild(textNode);
        document.getElementById('messages').appendChild(node);
      });
    </script>
</head>
<body>
<h1>Mesajlar</h1>
<ul id="messages"></ul>
</body>
</html>

Yaptığımız işlemler;

  • Jquery kullanmak adına Jquery CDN linkini dahil ettik,
  • Oluşturduğumuz event'ın Pusher'ı tetiklemesi sonrasında elde ettiğimiz verileri ekrana bastırmak adına bir adet liste oluşturduk ve verileri o listeye eklettik.


web.php sayfasını açıp gerekli route işlemlerini yazıyoruz:

<?php

use App\Events\FormSubmitted;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/receiver', function () {
    return view('receiver');
});

Route::get('/sender', function () {
    return view('sender');
});

Route::post('/sender', function () {
    $text = request()->text;
    event(new FormSubmitted($text));
    return view('sender');
});


Son olarak projemizi ayağa kaldırıp sonuca göz atıyoruz:

php artisan serve



Umarım faydalı olmuştur.


İyi çalışmalar.