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/