Search code examples
javascriptphplaravelfrontendlaravel-livewire

Real-time notifications using Laravel Livewire

Specifically, I am trying to alert a user when he/she has a message.

The problem is that once a message is sent, the inbox count does not update until I reload the page.

I want to Update the view with real-time data from the back-end. What do I do?

This is my wire view: enter image description here

This is my wire-component: enter image description here

PS: to test this, I've implemented an increment method and it works upon clicking. Same can't be said for unreadCount(). I am new to livewire so, any help rendered will be appreciated

Solution

  • That is not an easy task, but I hope I can help you.

    Basically, there are two ways to resolve this.

    The first one is using Livewire Polling, where your frontend requests the database every 2 seconds to check if there are any new notifications for this user. Specifically, you can use wire:poll.keep-alive in your case.

    <div class="{{$this->unreadCount > 0 ? 'block' : 'hidden'}}"
     wire:poll.keep-alive>
    You have {{$this->unreadCount}} new notifications.
</div>

    It is important to clarify that, depending on the size of your project and the number of users, this solution may overload your database with frequent requests.

    In advance, you can use a WebSocket solution, which is the second and ideal approach. It acts as a monitor that checks your backend application and only sends the unreadCount to your frontend when an event is emitted.

    The difference between the two approaches is that the first one makes requests to the database every 2 seconds, while the second one only does when the event is emitted.

    It's worth to know that the WebSocket solution is more complex and requires knowledge of Laravel events and listeners. However, there are plenty of online resources available about WebSockets. If you are comfortable with these concepts and pretend to scale your application, you can give it a try.

    There are free WebSocket solutions, but I recommend you to go with Pusher because the Laravel App is already pre-configured for use it. Using pusher, you have a free plan that receives until 200k messages per day and 100 connections that is just nice for small projects.

    I hope this helps!