Common Issues using Laravel Websockets with beyondcode/laravel-websockets

Websockets are a powerful tool that can make your site or project truly dynamic. With websockets, you can directly influence the visible frontend for a particular user from the backend. It's like magic! ✨️

However, setting up websockets can be a pain, especially if you want to go with a native solution without a third-party provider like Pusher. There's nothing wrong with using Pusher, but if you prefer to keep the number of dependencies low and have more direct control over your project, a native solution might be a better choice. For my new SEO-project, RankLetter, I decided to set up native websockets.

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

"Channels current state is unavailable" #

Is the WebSockets server running? You can check this by running the command php artisan websockets:serve. If the command fails because the port is in use, it means that the server is already running. In that case, you can try to restart it using the command php artisan websockets:restart.
Have you configured the SSL-related settings? You can configure these settings by setting the following variables as needed:

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK
LARAVEL_WEBSOCKETS_SSL_PASSPHRASE

Make sure to set these variables with the correct SSL certificate and key paths, as well as the correct passphrase if necessary.

WebSocket is closed before the connection is established. #

Occasionally, the WebSocket connection may drop before it starts working properly. If this happens, you may see an error message that looks 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.

If you're experiencing this issue, there are a couple of possible solutions you can try:

Add wss to your Echo configuration to enable secure WebSocket connections:

enabledTransports: ['ws', 'wss']

Another possible solution is to downgrade to Pusher JS version 4.4.0 by running the following command: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. #

This means your WebSocket server might not be running. To check if your WebSocket server is running, follow the steps described in the first issue.

"Failed to connect to Pusher." #

This issue may occur if you're using TLS without setting https as the scheme in your config/broadcast.php file, or if the curl process is unable to verify the host for some reason. To fix this issue, try the following steps:

If you're using useTLS in your configuration file, add https as scheme in your config/broadcast.php.
Add the following curl options to your configuration file:

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

Context: By setting CURLOPT_SSL_VERIFYHOST and CURLOPT_SSL_VERIFYPEER to 0, you are telling cURL to skip the SSL host verification and certificate verification steps, which may be necessary if the WebSocket server is using a self-signed or invalid SSL certificate.

Here's an example of what your config/broadcast.php file might look like after making these changes:

'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 these solutions help you get your project up and running. If you're still having issues, don't hesitate to seek further help in the issues section of the beyondcode/laravel-websockets repository. Before posting a new issue, be sure to search through the existing ones to save time for both yourself and others. 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