Common Issues using Laravel Websockets with beyondcode/laravel-websockets

Websockets are powerful and give your site or project really dynamic. You can directly influence the visible frontend for a particular user from the backend. Magic ✨️

Yet, they can be a pain setting up. Especially, if you are opting to go with native solution without a third-party provider such as Pusher. Nothing is wrong with using Pusher - I just like to keep the number of dependencies low and like to have it under my direct control. So for my new SEO-project RankLetter, I've set up native websockets.

Here is a list of issues I've faced while setting up Laravel Websockets using beyondcode/laravel-websockets and how I solved them:

"Channels current state is unavailable"

Is the websockets serve running? Try to run php artisan websockets:serve, if it fails because the port is in use, it's running.

If so, attempt to restart it using php artisan websockets:restart

Have you configured the SSL-related configurations?

Set

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK
LARAVEL_WEBSOCKETS_SSL_PASSPHRASE

as needed.

WebSocket is closed before the connection is established.

Sometimes the connection might drop before it's really working. The error message might look somewhat similar to this:

New connection opened for app key app.
Connection id 576531883.144427763 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"576957883.192427708\",\"activity_timeout\":30}"}
Connection id 576531883.144427763 closed.

You can fix this by adding wss in your echo configuration:
```
enabledTransports: ['ws', 'wss']
```
Downgrading to Pusher JS v4.4.0 might is also be a solution: npm install pusher-js@4.4.0.

Firefox can’t establish a connection to the server at wss://domain.com:6001/app/abc123?protocol=7...

Check if your socket server is running using the steps described in the first issue.

"Failed to connect to Pusher."

This might be the case if you are using TLS without setting 'https' as a scheme or the curl process can't verify the host for whatever reason. To solve this:

Add https as scheme in your config/broadcast.php, if you are using 'useTLS'.

Add the curl options as following:

'curl_options' => [
    CURLOPT_SSL_VERIFYHOST => 0,
    CURLOPT_SSL_VERIFYPEER => 0,
],

In complete, my config/broadcast.php entry for the pusher connection looks like this:

'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'),
        'useTLS' => true,
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
        'scheme' => 'https',
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ],
    ],
],

Still Fighting?

I hope this might helped along with getting your project working. If not, I'm sorry I can't be off more help. The issues on beyondcode/laravel-websockets might be your best bet. Search before posting to save yourself and others time. Good luck!

Peter about code and other ramblings