Kategoriler
Genel Laravel

Laravel’e Pusher ile Real-Time Bildirimler Nasıl Eklenir

Pusher bir web hizmetidir

… WebSockets aracılığıyla iki uygulama arasında gerçek zamanlı bildirim göndermemize yarıyor.

Çok basit bir API’ye sahip, ancak Laravel Broadcasting ve Laravel Echo ile onu daha da basit hale getireceğiz .

Bu yazımızda, mevcut bir projeye gerçek zamanlı bildirimler ekleyeceğiz.

Events ve Listeners Oluşturma

EventServiceProvider altına aşağıdaki kod bloğunu ekliyoruz.

/**
 * The event listener mappings for the application.
 *
 * @var array
 */
protected $listen = [
    'App\Events\TriggerStatusChanged' => [
        'App\Listeners\TriggerStatusChangedListener',
    ],
];

Events klasörü altında TriggerStatusChanged.php adında bir dosya oluşturuyoruz.

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

    public $order;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Order $order)
    {

        $this->order = $order;

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
    

        return ['private-pizza-tracker.'.$this->order->id, 'pizza-tracker'];
    }

    /**
     * Get the data to broadcast.
     *
     * @return array
     */
    public function broadcastWith()
    {
        $extra = [
            'status_name' => $this->order->status->name,
            'status_percent' => $this->order->status->percent,

        ];

        return array_merge($this->order->toArray(), $extra);
    }
}

Extra olarak göndermek istediğimiz verileri broadcastWith fonksiyonu ile gönderiyoruz. Daha sonra pusher paketini kurmak için aşağıdaki komutu yazıyoruz.

composer require pusher/pusher-php-server

Paket kurulumu bittikten sonra Event’i tetikleteceğimiz yere gidiyoruz. Örn: Herhangi bir Controller.

  public function update(Request $request, Order $order)
    {

        $request->validate([
            'status_id' => 'required|numeric',
        ]);

        $order->status_id  = $request->status_id;
        $order->save();

  
        event(new TriggerStatusChanged($order));

        return back()->with('message', 'Order Status updated successfully!');
    }

Pusher‘a kayıt olup env dosyasında yapılacak değişiklikler için bilgileri alıyoruz.

.env

BROADCAST_DRIVER=pusher

PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_ID=

Olayı neye göre tetikleteceğimizi belirlemek için routes klasörü altındaki channels.php dosyasında değişiklik yapıyoruz.

Broadcast::channel('pizza-tracker.{id}', function ($user, $id) {
    return (int) $user->id === (int) Order::find($id)->user_id;
});

Anlık olarak bildirim göstermek için vue.js kullanacağız. Aşağıdaki paketleri yüklüyoruz.

npm install --save laravel-echo pusher-js vue-strap lodash

resources/assets/js/bootstrap.js içerisine aşağıdaki kod bloğunu ekliyor ve ayarları pusher‘dan aldığımız bilgiler ile değiştiriyoruz.

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    cluster: 'eu',
    encrypted: true
});

resources/assets/js/app.js içerisine aşağıdaki kod bloğunu ekliyoruz.

Vue.component('order-notifications', require('./components/OrderNotifications.vue').default);

const app = new Vue({
    el: '#app',
    mounted() {
      Echo.channel('pizza-tracker')
      .listen('TriggerStatusChanged', (e) => {
        console.log('omgggg realtime bro')
      });
    }
});

resources/components/OrderNotifications.vue içerisine aşağıdaki kod bloğunu ekleyerek göstereceğimiz bildirimi ayarlıyoruz. Bu bildirimi vue-strap kullanarak hazır çağırıyoruz.

<template>
  <modal v-model="showAlert" placement="top-right" duration="4000" type="success" width="400px" dismissable>
    <div slot="modal-header" class="modal-header">
      <h6 class="modal-title">
        <i class="material-icons dp48" style="position: relative; top:5px;">contact_phone</i> <b>Gelen Arama</b>
      </h6>
    </div>
    <div slot="modal-body" class="modal-body"><p>Arayan: {{ customer_name }}</p><p>Telefon: {{customer_phone}}</p></div>
    <div slot="modal-footer" class="modal-footer">
      <button type="button" class="modal-action modal-close waves-effect waves-red btn-flat red darken-4" @click="showAlert = false">Kapat</button>
      <a class="modal-action modal-close waves-effect waves-green btn-flat teal darken-1" v-bind:href="this.customer_id">Kişi Kartı</a>

    </div>
  </modal>
</template>

<script>
import {modal} from 'vue-strap'

export default {
  components: {
    modal
  },

  props: ['user_id'],

  data() {
    return {
      showAlert: false,
      customer_id: '',
      order_id: '',
      customer_name: '',
      customer_phone: ''
    }
  },

  mounted: function () {
    Echo.channel('pizza-tracker')
        .listen('OrderStatusChanged', (order) => {
          if (this.user_id == order.user_id) {
            this.showAlert = true,
                this.order_id = order.id,
                this.customer_id = order.last_customer_id,
                this.customer_name = order.last_customer_name,
                this.customer_phone = order.last_customer_phone
            
          }
        });

  }
}
</script>

Bütün işlemler bittikten sonra konsola npm run dev yazarak yaptığımız değişikliklerin public klasörü içerisindeki app.js dosyasına işlenmesini sağlıyoruz.

VE SONUÇ !!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir