How to listen Laravel Broadcast Notification?

I would highly recommend checking out laravel-websockets instead of setting up a local socket .io server

https://laravel-news.com/laravel-websockets

It gives you the same features as pusher but for free. Fully supports laravel echo and is as simple as running an artisan command.

As a bonus its production tested and ready!!!

@D9705996 - It sad to say that it's only support in Laravel 5.7.... By the way sir this is my case...

Case: If there's a push in a github repo it will notify the user (admin)..

I implemented like this.

1. I set my api route in github webhook payload URL

2. This was the link that I set in github payload URL. Route::post('iaccs-hook', 'WebhookController@handle');

In my controller:

public function index(Request $request){
        view()->share('page_sub', 'Webhhook');

        $data = Cache::store('file')->get('repo');

        // dd($data);

        return view('pages.admin.system.webhook.index')->with('data',$data);
    }

    public function handle(Request $request){

        // $data = $request;

        $admins = User::whereHas('roles', function($q){$q->whereIn('roles.name', ['superadmin']);})->get();

        $data = [
            'id' => $request['repository']['id'],
            'name' => $request['repository']['name'],
            'tags_url' => $request['repository']['tags_url'],
            'archive_url' => $request['repository']['archive_url'],
            'updated_at' => $request['repository']['updated_at'],
        ];
        
        $now = \Carbon\Carbon::now();

        $repo_data = cache('repo');
    
        \Log::info($data);
        
        if ($data['updated_at'] != $repo_data['updated_at']) {
            Cache::store('file')->put('repo', $data, $now->addMonth());
        }

        foreach($admins as $user){
            $user->notify(new  WebhookNotification($repo_data));
        }
    }

It will notify the user but the problem is you need to refresh the page first for the notif icon will popup...

This was my header view...

<div class="an-notifications" id="notify">
            <div class="btn-group an-notifications-dropown notifications" >

                @if (count(auth()->user()->unreadNotifications) > 0 ) 

                    <button type="button"  class="an-btn an-btn-icon dropdown-toggle js-has-new-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="notif">
                        <i class="ion-ios-bell-outline"></i>
                    </button>

                @elseif (count(auth()->user()->unreadNotifications) === 0 ) 

                    <button type="button"  class="an-btn an-btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="notif">
                        <i class="ion-ios-bell-outline"></i>
                    </button>

                @endif
                
                <div class="dropdown-menu">
                    <p class="an-info-count">Notifications <span>{{count(auth()->user()->unreadNotifications)}}</span></p>
                    <div class="an-info-content notifications-info notifications-content">
                        

                        <ul class="nav">
                            <li>
                                @forelse(auth()->user()->unreadNotifications as $notification)

                                    <div class="an-info-single unread" id="notif">
                                        <a href="{{url('iaccs-hook-list')}}">
                                            <span class="icon-container important">
                                                <i class="icon-setting"></i>
                                            </span>
                                            <div class="info-content">
                                                <h5 class="user-name">Update Client</h5>
                                                <p class="content"><i class="icon-clock"></i> {{$notification->created_at}}</p>
                                            </div>
                                        </a>
                                    </div>
                                    @empty
                                    <a href="">No Unread Notification</a>

                                @endforelse
                            </li>
                        </ul>

                    </div> <!-- end .AN-INFO-CONTENT -->
                    <div class="an-info-show-all-btn">
                        <a class="an-btn an-btn-transparent fluid rounded uppercase small-font" href="#">Show all</a>
                    </div>
                </div>
            </div>
        </div> <!-- end .AN-NOTIFICATION -->

What do I missed? or how should I implemented sir that if there's incoming webhook it will automatically notify the user (icon will popup) without refreshing the page..

@anonymouse703 I believe that there is no other way unless you use something like vue which dynamically updates your view.

I am not entirely sure what you mean when you say "It will notify the user but the problem is you need to refresh the page first for the notif icon will popup.."

If you are saying you have to manually reload the page the maybe you can try below code after notifying the user.

return redirect()->to('/route'); 

Thanks!

@PRASADCHINWAL5 - Yeah, all the tutorial also in youtube are vue... but in our case we used blade in our project...

should I used Ajax for this?

@PRASADCHINWAL5 - Ahmp Let me clarify my question I think it's miss understood..

Here's the flow...

It should be like this: github push (using git bash) ->api route (which registered in payload URL in github)->notify the admin user.

What I implemented is this:

github push ->api route ->webhook contoller(where I notify the user).

Is my flow is wrong? or I need to install larave echo and socket.io or something

by the way return redirect()->to('/') doesn't work..

@ANONYMOUSE703 - In that case I believe implementing this with vue and something like Pusher and using Broadcast Notification would be much easier.

There is also a lesson on Broadcasting by Jeffery Lesson.

Thanks.

@PRASADCHINWAL5 - vue and socket will do... but we do blade in our project... I already installed laravel echo + redis and socket io... So far my problem is in socket,js where I put my server configuration and the script in my client where to popup the icon.