Pusher notifications are shown multiple times after navigating within Splade

[J87NL]

• Laravel Version: 10.13.2
• PHP Version: 8.2.6
• Splade JS Version (npm): 1.4.11
• Splade PHP Version (composer): 1.4.11
• Dev environment (OS, Sail/Valet/etc): Ubuntu with Apache2

Description:

Initially, after a hard refresh, when a new event is broadcasted the notification is shown once, as expected. But when I navigate within my Splade app (with <Link ...>'s) and a event is broadcasted, it shows up multiple times:

Posted all relevant code below. Followed documentation as described at https://splade.dev/docs/x-event#Toast%20on%20event In the Pusher Dashboard the event exists only once. I hope someone knows a possible solution for this!

Steps To Reproduce Issue:

Installed with composer:

                "pusher/pusher-php-server": "^7.2",

Installed with NPM:

                "laravel-echo": "^1.15.1",
                "pusher-js": "^8.0.2",

resources/views/layouts/app.blade.php:

                <x-splade-event private channel="admins" listen="AdminUpdate" />

In config/app.php I uncommented:

        App\Providers\BroadcastServiceProvider::class,

routes/channels.php:

<?php

use App\Models\User;
use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('admins', function (User $user) {
    return $user->hasRole('admin');
});

app/Observers/ReactionObserver.php:

<?php

namespace App\Observers;

use App\Events\AdminUpdate;
use App\Models\Reaction;

class ReactionObserver
{
    public function saved(Reaction $reaction): void
    {
            $reaction->loadMissing('ticket');

            event(new AdminUpdate(__('New reaction to: [:slug] :title', [
                'slug' => $reaction->ticket->slug,
                'title' => $reaction->ticket->title,
            ])));
    }

app/Events/AdminUpdate.php:

<?php

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use ProtoneMedia\Splade\Facades\Splade;

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

    protected string $text;

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

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('admins'),
        ];
    }

    public function broadcastWith(): array
    {
        return [
            Splade::toastOnEvent($this->text)
                ->rightBottom()
                ->autoDismiss(0),
        ];
    }

[P-James]

This happens because as you navigate around the app the Echo callbacks get re-registered. I don't know how to fix it in Splade, but this might help someone who does.

I had a similar issue on an inertia repo, where I had created a Vue composable useOnEvent that was getting re-registered because of where it was called (I think it was in a layout component or something like that, I can't remember exactly).

If you console.log window.Echo, check the event callbacks, then navigate around and check again, you'll see it ticks up. Like here, I have 3 callbacks for each event, where there should only be 1.