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&client=js&version=7.0.0&flash=false. #

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 With Websockets? #

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!

🙏🙏🙏

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.

Published 24 Oct 2020