X-Splade-Event Component

The Event Component might be the most incredible Splade component of all. It allows you to listen for broadcasted events using Laravel Echo.

Setup

This component assumes you've set up Laravel Echo as in the official docs. You need to make sure the Echo instance is accessible through window.Echo. Future releases of Splade might allow for other implementations.

Redirect on event

Imagine your app allows customers to make payments. The payment provider redirects back to a status page, and performs a webhook request once the payment has succeeded. On the status page, you may poll for an updated status, but also listen for a broadcasted event. With Splade, you may instruct the status page to listen to the OrderWasPaid event and redirect to another page when the event is fired.

In the broadcastWith method of your event, use Splade::redirectOnEvent() to generate an URL to redirect to. Under the hood, it uses Laravel's Redirector class, so that you can use standard methods like route and to:

<?php
 
use App\Models\Order;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use ProtoneMedia\Splade\Facades\Splade;
 
class OrderWasPaid implements ShouldBroadcast
{
    public function __construct(public Order $order)
    {
    }
 
    public function broadcastOn()
    {
        return new PrivateChannel('customer.' . $this->order->customer_id);
    }
 
    public function broadcastWith()
    {
        return [
            Splade::redirectOnEvent()->route('order.summary', $this->order->id),
        ];
    }
}

In your Blade template, specify the channel and event you want to listen to. You may use the private attribute to indicate that a channel is private.

<x-splade-event private channel="customer-1" listen="OrderWasPaid" />

Refresh on event

Similar to redirecting, you may also refresh the current page.

<?php
 
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use ProtoneMedia\Splade\Facades\Splade;
 
class OrderStatusWasUpdated implements ShouldBroadcast
{
    public function broadcastWith()
    {
        return [
            Splade::refreshOnEvent(),
        ];
    }
}

Optionally, you may preserve the scroll state:

Splade::refreshOnEvent()->preserveScroll();

Instead of doing this in the Event class, you may also use the preserve-scroll attribute in your Blade template:

<x-splade-event private channel="customer-1" listen="OrderStatusWasUpdated" preserve-scroll />

Toast on event

Splade allows you to send toasts to the frontend using broadcasted events. Use the Splade::toastOnEvent() method to instantiate a new toast.

<?php
 
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use ProtoneMedia\Splade\Facades\Splade;
 
class HighServerLoadDetected implements ShouldBroadcast
{
    public function broadcastWith()
    {
        return [
            Splade::toastOnEvent('High server load detected')->warning(),
        ];
    }
}

Listen for multiple events

You may specify multiple events to listen to:

<x-splade-event private channel="customer-1" listen="OrderWasCancelled, OrderWasPaid" />

Using raw event data

Instead of the features above, you may also use the raw event data. In addition, there are subscribed and events props:

<x-splade-event private channel="admins" listen="IncomingEmail, IncomingSupportBubble">
    <p v-if="subscribed">Subscribed!</p>
 
    <div v-for="event in events">
        <p v-text="event.name" />
        <p v-text="event.data.username" />
    </div>
</x-splade-event>