Filament•12mo ago

How can I make fields live across sessions?

So when a user is typing in a RichEditor, other users can see it live from the view page. I tried doing it using broadcasting, but didnt work. I can share code, but only if thats the only solution and there is no way to do it through filament. Also afaik live() only works for the current users session.

3 Replies

MatthewOP•12mo ago

so far this is what im using

Forms\Components\RichEditor::make('minutes')
  ->reactive()
  ->live(onBlur: true,debounce: 1000)
  ->afterStateUpdated(function (?Model $record, Field $component, $state) {
    $record->{$component->getName()} = $state;
    $record->save();
})

Forms\Components\RichEditor::make('minutes')
  ->reactive()
  ->live(onBlur: true,debounce: 1000)
  ->afterStateUpdated(function (?Model $record, Field $component, $state) {
    $record->{$component->getName()} = $state;
    $record->save();
})

up Anyone?

Dennis Koch•12mo ago

Broadcasting via Websockets would be the way to go. But I have no experience integrating that into a Filament form.

MatthewOP•12mo ago

Okk thanks! I will post some code shortly, and maybe someone else can help

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your_pusher_key',
    cluster: 'your_cluster',
    encrypted: true
});

Echo.channel(`meeting.${meetingId}`)
    .listen('MeetingUpdated', (e) => {
        console.log('Meeting updated:', e.meeting);
        // Update the 'minutes' field in your UI here
    });

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your_pusher_key',
    cluster: 'your_cluster',
    encrypted: true
});

Echo.channel(`meeting.${meetingId}`)
    .listen('MeetingUpdated', (e) => {
        console.log('Meeting updated:', e.meeting);
        // Update the 'minutes' field in your UI here
    });

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MeetingUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $meeting;
    
    /**
     * Create a new event instance.
     */
    public function __construct($meeting)
    {
        $this->meeting = $meeting;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('meeting.' . $this->meeting->id),
        ];
    }
}

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MeetingUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $meeting;
    
    /**
     * Create a new event instance.
     */
    public function __construct($meeting)
    {
        $this->meeting = $meeting;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('meeting.' . $this->meeting->id),
        ];
    }
}

                    Forms\Components\RichEditor::make('minutes')
                        ->reactive()
                        ->afterStateUpdated(function (?Model $record, Field $component, $state) {
                            $record->{$component->getName()} = $state;
                            $record->save();
                            broadcast(new MeetingUpdated($record));
                        })

                    Forms\Components\RichEditor::make('minutes')
                        ->reactive()
                        ->afterStateUpdated(function (?Model $record, Field $component, $state) {
                            $record->{$component->getName()} = $state;
                            $record->save();
                            broadcast(new MeetingUpdated($record));
                        })

I can see that the pusher gets the messages, however, nothing is printed in the console Is it maybe impossible to update a form on the view page after it has loaded? The other option would be to add polling? Although i dont think that is possible with resources up

Gaming

Programming

How can I make fields live across sessions?