Troubleshooting Laravel Echo and Laravel Websockets

by

Uncaught You must pass your app key when you instantiate Pusher.

Check you have defined your variables in the .env file with the correct prefix MIX_ or VITE_

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Check you are calling the correct env variables through the process.env JS Object, the only variables that are passed to the process.env object are the prefixed ones.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
});

WebSocket connection to <URL> failed.

If you are using HTTPS to connect to Websockets check that you are enabling both transports on the Echo initialization on bootstrap.js file. Also check that your host and port for wss are enabled.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    enabledTransports: ['ws', 'wss'],
    wsHost: window.location.hostname,
    wssHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: true,
    disableStats: true,
    encrypted: false
});

Illuminate\Broadcasting\BroadcastException with message ‘Failed to connect to Pusher.’

If you are on localhost check if the your connection is checking the SSL verification in your config/broadcasting.php:

    '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'),
            'encrypted' => true,
            'host' => '127.0.0.1',
            'port' => 6001,
            'scheme' => 'https',
            'curl_options' => [ // since we're only doing stuff locally this is fine
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ],
        ],
    ],

Leave a Comment