Refreshing Component using Livewire Poll not working

106 Views Asked by At

Please i am developing a chat application and i'm using livewire component for the conversation part with polling to refresh the component so as to keep fetching the updated messages but this is not working effectively. I have to refresh the whole page before seeing the latest message. But i however notice that if I delete one of the messages directly in the database, the component reload and the message i deleted will disappear from the conversation which imply that the polling is working but i don't know why new message does not appear when added until the whole page is reloaded.

<div wire:poll.keep-alive.2s>
        <ul>
            @foreach ($this->conversations as $message)
                <li>
                    <div class="singel-reviews {{Auth::user()->matricno==$message->matricno ? 'sender':'responder'}}">
                        <div class="reviews-author">
                            <div class="author-thum">
                                <img src="{{asset('profile_pictures/'.$message->user->alumniProfile->profile_picture)}}" class="messagePic" alt="Reviews">
                            </div>
                            <div class="author-name">
                                <h6>{{$message->user->name}}</h6>
                                <span>{{$message->created_at->format('H:i:s d-m-Y')}}</span>
                            </div>
                        </div>
                        <div class="reviews-description pt-10">
                            <p>{{$message->body}}</p>
                        </div>
                        
                    </div> <!-- singel reviews -->
                </li>
            @endforeach
        </ul>
</div>


namespace App\Livewire;

use App\Models\Thread;
use Livewire\Component;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;

class AlumniChat extends Component
{
    public $receiver;
    public $thread_id,$conversations;

    public function mount(){
        $this->thread_id=DB::table('participants')->whereIn('matricno',[Auth::user()->matricno,$this->receiver])->groupBy('thread_id')->havingRaw('COUNT(*) > 1')->value('thread_id');
        if(!empty($this->thread_id)){
            $this->conversations=Thread::find($this->thread_id)->messages;
        }else{
            $this->conversations="";
        }
    }

    public function render()
    {
        return view('livewire.alumni-chat');
    }
}

Below is the code for the component and class

Please note I've tried passing the conversations to the component view through the render method or calling it directly in the view but both is the same result. I need a kind advise on what I am doing wrong, I don't want to use pusher

0

There are 0 best solutions below