Hello, I'm trying to use Laravel reverb and echo on my local dev. I have tried many different configuations but none have been working. I'm going to post my current config and maybe one of you can see what I'm doing wrong.
Please note I'm using Laravel Herd to run reverb.
npm run dev
\App\Events\TestEvent::dispatch("Hello from Tinker!");
The Error
echo.js:6 WebSocket connection to 'wss://0.0.0.0:8080/app/laravel-herd?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:
# .env
BROADCAST_CONNECTION=reverb
REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="0.0.0.0"
REVERB_PORT=8080
REVERB_SCHEME=https
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"
<!-- Welcome Blade -->
<script>
Window.Echo.private(`App.Models.User.1`)
.listen('TestEvent', (e) => {
console.log('Received message:', e.message);
});
window.Echo.private('test-channel')
.listen('.test-event', (e) => {
console.log('Received message:', e.message);
});
</script>
// broadcasting.php
<?php
'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
'verify' => env('APP_ENV') !== 'local',
],
],
// echo.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'],
});
// channels.php
<?php
use Illuminate\Support\Facades\Broadcast;
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});
// TestEvent.php
<?php
class TestEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public function broadcastOn(): array
{
return [
new PrivateChannel('App.Models.User.1'),
];
}
public function broadcastAs()
{
return 'test-event';
}
}