Overview

As of now you are able to send/receive Real-Time Notifications in Laravel 11 Using Laravel Reverb & Laravel Echo then communicate Securly WebSockets with Authentication in Laravel 11 (Reverb & Laravel Echo) and then you are able to see that which user is online.

Next comes how to see the list of online users.

Display Online Users in the UI Using Laravel 11, Laravel Reverb & Laravel Echo

Now, let’s show a list of online users dynamically in your frontend.

Step 1: Create a Vue/Blade Component for Online Users

If you’re using Vue.js or React, you can modify it accordingly. For now, let’s use Blade with Alpine.js.

Create a new Blade file:
resources/views/online-users.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    </head>
    
    <body>
        <div x-data="{ users: [] }" x-init="
            Echo.join('online-users')
                .here(users => { users.forEach(user => users.push(user)) })
                .joining(user => { users.push(user) })
                .leaving(user => { users = users.filter(u => u.id !== user.id) }); ">
            <h2>Online Users</h2>
            <ul>
                <template x-for="user in users" :key="user.id">
                    <li x-text="user.name"></li>
                </template>
            </ul>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

💡 How it works:

  • Alpine.js manages the users list dynamically
  • Laravel Echo listens for users joining/leaving
  • The UI updates automatically when users join or leave

Step 2: Serve the Online Users Page

Modify routes/web.php:

Route::get('/online-users', function () {
    return view('online-users');
});

Now, visit:

http://127.0.0.1:8000/online-users

You’ll see a real-time list of online users! 🚀

Step 3: Restart Everything

Make sure all services are running:

php artisan cache:clear
php artisan config:clear 
php artisan reverb:start 
npm run dev 
php artisan serve

✅ Final UI Summary

✅ Online users displayed in real-time
✅ UI updates dynamically as users join/leave
✅ Uses Laravel Echo & Alpine.js for instant updates
✅ Fully secured with authentication