Laravel echo + reverb problems

[krystian-lata]

So i have a clean Laravel installation - totally new project. Wanted to try out laravel websockets - reverb. Setup project with Jetstream - Livewire. Project is using Sail.
Ran everythin, all fine. Then i proceed to do everything according to docs for Laravel Echo and Reverb.
I start the server using php artisan reverb:start --debug

The problem is nothing is happening from the backend side - no errors, exceptions, nothing. Event gets dispatched handled by the queue (either sync or database, tried both) but I can't see it on reverb server as it just disappeared.

I also tried connecting with Laravel Echo from the frontend part but i only get console error:
Firefox can’t establish a connection to the server at ws://0.0.0.0:8080/app/cr8zc1h5regr2pzohwxq?protocol=7&client=js&version=8.4.0-rc2&flash=false. [app-Ce46D43m.js:13:4900](http://localhost/build/assets/app-Ce46D43m.js)
Firefox can’t establish a connection to the server at wss://0.0.0.0:8080/app/cr8zc1h5regr2pzohwxq?protocol=7&client=js&version=8.4.0-rc2&flash=false. [app-Ce46D43m.js:13:4900](http://localhost/build/assets/app-Ce46D43m.js)
The connection to wss://0.0.0.0:8080/app/cr8zc1h5regr2pzohwxq?protocol=7&client=js&version=8.4.0-rc2&flash=false was interrupted while the page was loading.

I would love to use Reverb and Echo but i just can't get it to work even in new clean project....

Any help would be appreciated.

Here is .env:

APP_ENV=local
APP_KEY=base64:30uaR+E24osBeSiZZlWn9BW6cT0/+B6TbbSXK42dhws=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=daily
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

SAIL_XDEBUG_MODE=develop,debug,coverage

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=reverb
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=database
SESSION_DRIVER=database
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"


REVERB_APP_ID=805426
REVERB_APP_KEY=cr8zc1h5regr2pzohwxq
REVERB_APP_SECRET=8sypy3vduogt0tjkyybi
REVERB_HOST="0.0.0.0"
REVERB_PORT=8080
REVERB_SCHEME=http

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

Here is broadcasting.php:

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "reverb", "pusher", "ably", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_CONNECTION', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over WebSockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'reverb' => [
            'driver' => 'reverb',
            'key' => env('REVERB_APP_KEY'),
            'secret' => env('REVERB_APP_SECRET'),
            'app_id' => env('REVERB_APP_ID'),
            'options' => [
                'host' => env('REVERB_HOST'),
                'port' => env('REVERB_PORT', 443),
                'scheme' => env('REVERB_SCHEME', 'https'),
                'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 443),
                'scheme' => env('PUSHER_SCHEME', 'https'),
                'encrypted' => true,
                'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

        'ably' => [
            'driver' => 'ably',
            'key' => env('ABLY_KEY'),
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

And finally reverb.php:

return [

    /*
    |--------------------------------------------------------------------------
    | Default Reverb Server
    |--------------------------------------------------------------------------
    |
    | This option controls the default server used by Reverb to handle
    | incoming messages as well as broadcasting message to all your
    | connected clients. At this time only "reverb" is supported.
    |
    */

    'default' => env('REVERB_SERVER', 'reverb'),

    /*
    |--------------------------------------------------------------------------
    | Reverb Servers
    |--------------------------------------------------------------------------
    |
    | Here you may define details for each of the supported Reverb servers.
    | Each server has its own configuration options that are defined in
    | the array below. You should ensure all the options are present.
    |
    */

    'servers' => [

        'reverb' => [
            'host' => env('REVERB_SERVER_HOST', '0.0.0.0'),
            'port' => env('REVERB_SERVER_PORT', 8080),
            'hostname' => env('REVERB_HOST'),
            'options' => [
                'tls' => [],
            ],
            'scaling' => [
                'enabled' => env('REVERB_SCALING_ENABLED', false),
                'channel' => env('REVERB_SCALING_CHANNEL', 'reverb'),
            ],
            'pulse_ingest_interval' => env('REVERB_PULSE_INGEST_INTERVAL', 15),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Reverb Applications
    |--------------------------------------------------------------------------
    |
    | Here you may define how Reverb applications are managed. If you choose
    | to use the "config" provider, you may define an array of apps which
    | your server will support, including their connection credentials.
    |
    */

    'apps' => [

        'provider' => 'config',

        'apps' => [
            [
                'key' => env('REVERB_APP_KEY'),
                'secret' => env('REVERB_APP_SECRET'),
                'app_id' => env('REVERB_APP_ID'),
                'options' => [
                    'host' => env('REVERB_HOST'),
                    'port' => env('REVERB_PORT', 443),
                    'scheme' => env('REVERB_SCHEME', 'https'),
                    'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
                ],
                'allowed_origins' => ['*'],
                'ping_interval' => env('REVERB_APP_PING_INTERVAL', 60),
                'max_message_size' => env('REVERB_APP_MAX_MESSAGE_SIZE', 10_000),
            ],
        ],

    ],

];

[krystian-lata]

Okay, i found evenr more info with debugger. Apparently because my event has no "boradcastConnections" function it returns an empty array which in return makes it go to NullBroadcaster

[dysTOS]

hey, had similar issues yesterday... For me it worked changing the following line in .env "BROADCAST_DRIVER=pusher", as 'reverb' is not a supported driver (found this out via the laravel.log). Doing so my events have been succesfully shipped to my frontend, but I still have some problems with notifications/private channels...

[jonnywilliamson]

I also found that

BROADCAST_DRIVER=reverb in the .env needed to be
BROADCAST_CONNECTION=reverb

Lost 3-4 hours on that oversight.

[DorelBesliu]

Thank you. That should be mentioned in documentation.

[KirinyetBrian]

had same issue too

[bekaddourelhadjali]

had the same issue and this fixed it

[Twyar]

How do you even get passed the

POST http://localhost:8000/broadcasting/auth [HTTP/1.1 404 Not Found 543ms]

I setup all the basics of Laravel Reverb according to the documentation.
Did php artisan reverb:start

In my Vue front-end I have.

onMounted(() => {
    window.Echo.private(`App.Models.User.${user.id}`)
        .listen('Example', (event) => {
            console.log(event);
        });
});

onUnmounted(() => {
    window.Echo.leave(`App.Models.User.${user.id}`);
});

Example being a simple event I made using php artisan make:event Example etc, but it just wont find my /broadcasting/auth route.
Is this missing from the documentation or am I missing something ?

[dysTOS]

Had this too.

I assume your routes/channels.php file looks something like this:

`Broadcast::channel('App.Models.User.{userId}', function ($user, $userId) {
    return $user->id == $userId;
});`

Then I need to change my Providers/BroadcastServiceProvider.php because I use sanctum for authorization, this might be different in your application.

class BroadcastServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Broadcast::routes(['prefix' => 'api', 'middleware' => ['auth:sanctum']]);

        require base_path('routes/channels.php');
    }
}

Last I had to use a custom authorizer in my javascript-frontend (typescript/angular):

this._echo = new Echo({
     broadcaster: 'reverb',
     key: 'yourkey',
     wsHost: environment.wsHost,
     wsPort: 8080,
     wssPort: 8080,
     forceTLS: environment.production === true,
     enabledTransports: ['ws', 'wss'],
     authorizer: (channel, options) => {
       return {
         authorize: (socketId, callback) => {

           //Angular specific - rxjs/firstValueFrom basically makes a Promise out of an Observable
          //you need to make a http-POST request, with socket_id, channel_name as payload
           firstValueFrom(
             this.httpClient.post(environment.apiUrl + 'broadcasting/auth', {
               socket_id: socketId,
               channel_name: channel.name,
             })
           )
             .then((response) => {
               callback(false, response); //important, this makes the dream work
             })
             .catch((error) => {
               callback(true, error);
             });
         },
       };
     },

});

[andriusgeci]

you have to be loged in because you echo.private is on private channel

[krystian-lata]

Okay so basically for me - Laravel Sail was the problem. Basically i had to expose a seperate port - 8080 in my case (but depends on your config - care you might have phpmyadmin there).
Full config:
laravel.test:
build:
context: ./docker/8.3
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.3/app
extra_hosts:
- 'host.docker.internal:host-gateway'
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
- '${REVERB_SERVER_PORT:-8080}:8080'
environment:
WWWUSER: '${WWWUSER}'
LARAVEL_SAIL: 1
XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
IGNITION_LOCAL_SITES_PATH: '${PWD}'
volumes:
- '.:/var/www/html'
networks:
- sail
depends_on:
- mysql
- mailpit
- selenium

After rebuilding without cache it started working. A stupid oversight but still - it should be in the docs of either sail or reverb since those are in theory supposed to work together

[andriusgeci]

yes I have and it seems to be only working when I do Event::dispatch otherwise its not working. also if you have this QUEUE_CONNECTION=sync set to database all of your event will be stored in DB and you need to start que worked so that all you event will be processed

[krystian-lata]

What also helped me was installing pulse and adding reverb dashboard components there. This way I could see if there are being pushed and then processed correctly. Might also be helpful with debugging

[andriusgeci]

Thanks for that will defo take a look into it.

[graweb]

I am using Laravel Sail with Reverb and I tried to resolve this problem some times and now you @krystian-lata helped me a lot.
Thank you.

[alexfaus08]

Thank you so much, this has been giving me such a headache.

[MichaelGzy]

omg

docker-compose.ymd

    ports:
        - '${APP_PORT:-80}:80'
        - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        - '${REVERB_SERVER_PORT:-8080}:8080'

php artisan reverb:start [i lost this step]

[andriusgeci]

if you are running it on container you probably want to run sail artisan reverb:start

[Jenry-MA]

I got the same issue, and I solved using ShouldBroadcastNow on event, and that works fine for me

[cybergeekamit]

REVERB_HOST="0.0.0.0" will be replaced by REVERB_HOST=localhost inside .env file