Filament•2w ago

Websocket - refresh table

I've been trying to find a way to refresh a table, or a specific row in a table using websockets. Say there's an event in a different module that would affect the data in the table, i'd like to re-fetch the data or only the row that was affected. Has anyone encounter something like this?

5 Replies

Rafa•7d ago

https://tenor.com/bDnF4.gif

Tenor

ChesterS•7d ago

Hmm I've done something similar, but my solution was not pretty... Essentially you need to figure out which records you have on the table, and only update if an event is for any of these ids Let me see if I can find the snippets So I created a 'custom' view like this

// my-custom-view.blade.php
    @include('filament-panels::resources.pages.list-records')
    @script
    <script>
        let ids = [];

        $wire.on('update-ids', data => {
            ids = data[0][0] ?? [];
        })

        Echo.private('your-channel')
            .listen('somethin-updated', (e) => {
                if (ids.includes(e.id) ) {
                    $wire.$refresh();
                }
            })
            .listen('somethin-created', () => {
                //always refresh if something was created because we might need it
                // remove if not needed
                $wire.$refresh();
            })
    </script>
    @endscript
</div>

// my-custom-view.blade.php
    @include('filament-panels::resources.pages.list-records')
    @script
    <script>
        let ids = [];

        $wire.on('update-ids', data => {
            ids = data[0][0] ?? [];
        })

        Echo.private('your-channel')
            .listen('somethin-updated', (e) => {
                if (ids.includes(e.id) ) {
                    $wire.$refresh();
                }
            })
            .listen('somethin-created', () => {
                //always refresh if something was created because we might need it
                // remove if not needed
                $wire.$refresh();
            })
    </script>
    @endscript
</div>

And in my component I did

 protected static string $view = 'my-custom-view';

public function hydrate(): void
{
    //Not sure if needed TBH, I don't grok livewire yet
    $this->dispatch('clear-listeners');
}

public function rendering(): void
{
    // when we render the table, we get all the visible ids
    // and pass them to the frontend so that we can listen to them
    // and only update the table if any of them is present
    $ids = $this->getTableRecords()->pluck('ids');
    $this->dispatch('update-ids', [$ids]);
}

 protected static string $view = 'my-custom-view';

public function hydrate(): void
{
    //Not sure if needed TBH, I don't grok livewire yet
    $this->dispatch('clear-listeners');
}

public function rendering(): void
{
    // when we render the table, we get all the visible ids
    // and pass them to the frontend so that we can listen to them
    // and only update the table if any of them is present
    $ids = $this->getTableRecords()->pluck('ids');
    $this->dispatch('update-ids', [$ids]);
}

There are probably better ways to do this but hope it helps you

Rafa•7d ago

Thank you @ChesterS, I'll take a look!!

ChesterS•7d ago

Honestly, it might be better if you use polling 😂 btw this uses websockets. If all you want to do is refresh a table when something happens somewhere else in the same page, you can just use normal events (https://livewire.laravel.com/docs/events)

Rafa•7d ago

Oh that works better!!! That's awesome

Gaming

Programming

Websocket - refresh table