Redis – Laravel Echo with Reverb Not Listening to Events in Real-Time and Showing Pusher Errors

I’m facing an issue with Laravel Echo where I’m using Reverb for broadcasting events instead of Pusher. However, when I try to listen to events in real-time, nothing happens until I reload the page. Additionally, I keep encountering errors related to Pusher even though I’m not using Pusher at all.

Environment:

• Laravel 11 Vite

.env :

APP_NAME=PUSAT-OTP
APP_ENV=local
APP_KEY=base64:6JdemGaC90WRlzdHu67O5Jw6qKaTrW6XuHPF0GX4eQM=
APP_DEBUG=true
APP_URL=http://localhost:18080
APP_PORT=8080

# Database and Redis
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=dbotp_project
DB_USERNAME=root
DB_PASSWORD=
CACHE_DRIVER=redis
QUEUE_CONNECTION=redis
REDIS_HOST=redis
REDIS_PORT=6379

# Broadcasting
BROADCAST_DRIVER=reverb
BROADCAST_CONNECTION=reverb

# Reverb Configuration
REVERB_APP_ID=946019
REVERB_APP_KEY=0hi8cdtq5c1fxvx51ggy
REVERB_APP_SECRET=binhrda9ycj51ybemsid
REVERB_HOST=0.0.0.0
REVERB_PORT=8080
REVERB_SCHEME=http
REVERB_SERVER=reverb

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Here’s a summary of my setup:

Controller:

public function storeSms(Request $request)
{
    // Other code...

    event(new SmsOTPUpdated($smsOtp->orderOtp));

    // Return response...
}

Event

class SmsOTPUpdated implements ShouldBroadcastNow
{
    public $orderOtp;

    public function __construct(OrderOtp $orderOtp)
    {
        $this->orderOtp = $orderOtp;
    }

    public function broadcastOn(): Channel
    {
        return new Channel('order.' . $this->orderOtp->id);
    }

    public function broadcastWith()
    {
        return ['sms' => $this->orderOtp->smsOtp->sms];
    }
}

Frontend (Blade with JavaScript):

document.addEventListener('DOMContentLoaded', function() {
    @foreach ($orders as $order)
        Echo.channel('order.{{ $order->id }}')
            .listen('SmsOTPUpdated', (e) => {
                let smsElement = document.getElementById('sms-{{ $order->id }}');
                if (smsElement) {
                    smsElement.innerHTML = `<pre>${e.sms}</pre>`;
                }
            });
    @endforeach
});

Error :
[2024-08-20 16:19:57] local.ERROR: Pusher error: cURL error 7: Failed to connect to localhost port 8080...
Steps I’ve Taken:

• Ensured that BROADCAST_DRIVER is set to reverb in .env.
• Cleared configuration and cache using php artisan config:clear and php artisan cache:clear.
• Verified that there are no references to Pusher in my configuration files or event classes.
• Tried running php artisan queue:work to see if that resolves the issue.

Problem:

• The event doesn’t listen in real-time until I reload the page.
• The error message still shows references to Pusher even though I’ve configured Laravel to use Reverb.

My Questions:

• Why is Laravel still attempting to use Pusher despite my configuration for Reverb?
• How can I ensure that events are listened to in real-time with Reverb, and get rid of these Pusher-related errors?

Any help or guidance would be greatly appreciated! Thank you!