Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon What are the steps to configure Echo for Laravel Reverb


What are the steps to configure Echo for Laravel Reverb


Here are the steps to configure Laravel Echo for Laravel Reverb:

1. Install Laravel Reverb using the `php artisan install:broadcasting` command, which will publish the necessary configuration files and install the required dependencies[2][4].

2. In the `bootstrap.js` file, uncomment the example Echo configuration and update the `broadcaster` option to `reverb`. Specify the Reverb environment variables for the `key`, `wsHost`, `wsPort`, `wssPort`, and `forceTLS`[4][5]:

js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

3. Compile your application's assets using `npm run build`[4].

4. Start the Reverb server using `php artisan reverb:start`[5].

5. Run Vite to ensure hot reloading of client-side changes with `npm run dev`[5].

6. Verify the Reverb configuration in your `.env` file, which should include the necessary environment variables like `REVERB_APP_ID`, `REVERB_APP_KEY`, `REVERB_APP_SECRET`, `REVERB_HOST`, `REVERB_PORT`, and `REVERB_SCHEME`[5].

By following these steps, you can successfully configure Laravel Echo to connect with your Laravel Reverb server and enable real-time communication in your application.

Citations:
[1] https://github.com/laravel/reverb/issues/154
[2] https://www.youtube.com/watch?v=GscAFW6eoBQ
[3] https://laraveldaily.com/post/configure-laravel-reverb-filament-broadcasting
[4] https://laravel.com/docs/11.x/broadcasting
[5] https://novu.co/blog/the-ultimate-guide-to-laravel-reverb/