While integrating Laravel Echo with Reverb as the broadcasting driver, I encountered a persistent WebSocket connection failure during local development. Below are the key symptoms and setup details that led to the issue.
Browser Console Errors
Unchecked runtime.lastError: The message port closed before a response was received.
WebSocket connection to 'ws://localhost:8080/app/FAKEKEY1234567890=?protocol=7&client=js&version=8.4.0&flash=false' failed:
This error appeared multiple times in the browser console, indicating that the client could not establish or maintain a WebSocket connection with the Reverb server running locally.
Echo Client Configuration
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 ?? 'http') === 'https',
enabledTransports: ['ws', 'wss'],
});
window.Echo.channel('chat')
.listen('.message.sent', (e) => {
console.log('📥 New message received:', e.message);
});
Environment Variables
# Reverb Broadcasting
BROADCAST_CONNECTION=reverb
REVERB_APP_ID=laravel
REVERB_APP_KEY=FAKEKEY1234567890
REVERB_APP_SECRET=secret
REVERB_HOST=localhost
REVERB_PORT=8080
REVERB_SCHEME=http
VITE_REVERB_APP_KEY=FAKEKEY1234567890
VITE_REVERB_HOST=localhost
VITE_REVERB_PORT=8080
VITE_REVERB_SCHEME=http
Reverb Server Output (via Sail)
./vendor/bin/sail artisan reverb:start
WARN[0000] The "d" variable is not set. Defaulting to a blank string.
...
INFO Starting server on 0.0.0.0:8080 (localhost).
Repeated warnings about undefined variables (d and fd) appeared, although the server claimed to be running on the expected port.