Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pusher notifications are shown multiple times after navigating within Splade #443

Open
J87NL opened this issue Jun 6, 2023 · 1 comment

Comments

@J87NL
Copy link
Contributor

J87NL commented Jun 6, 2023

  • 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:

afbeelding

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
Copy link

P-James commented Sep 2, 2023

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.

CleanShot 2023-09-02 at 11 02 38

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants