As I was following through the instructions on the basic usage of laravel websockets adding ssl. I encountered Websocket connection error in my production web app.

WebSocket connection to 'wss://sub.mylaravapp.com:6001/app/58f20f3e6002cc53ba0a?protocol=7&client=js&version=4.4.0&flash=false' failed: WebSocket is closed before the connection is established.

I already did a lot of research on how to fix this and yet most of them does not work. Or simply there isn’t much information about how to configure laravel-websockets in nginx with let'sEncrypt SSL

Here’s my broadcasting.php configurations:

        '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'),
                /*'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
                'encrypted' => false*/
                'encrypted' => true,
                'useTLS' => true,
                'host' => 'sub.mylaravapp.com',
                'port' => 6001,
                'scheme' => 'https',
                 'curl_options' => [
                    CURLOPT_SSL_VERIFYHOST => 0,
                    CURLOPT_SSL_VERIFYPEER => 0,
                ]
            ],
        ],

Here’s my bootstrap.js configurations:

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '58f20f3e6002cc5nan0a',
    //cluster: 'ap1',
    //encrypted: false,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss']
    //cluster: 'ap1'
    //encrypted: true
});

Here’s my Websockets.php configurations:

    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ],


    'statistics' => [
        /*
         * This model will be used to store the statistics of the WebSocketsServer.
         * The only requirement is that the model should extend
         * `WebSocketsStatisticsEntry` provided by this package.
         */
        'model' => \BeyondCode\LaravelWebSockets\Statistics\Models\WebSocketsStatisticsEntry::class,

        /*
         * Here you can specify the interval in seconds at which statistics should be logged.
         */
        'interval_in_seconds' => 60,

        /*
         * When the clean-command is executed, all recorded statistics older than
         * the number of days specified here will be deleted.
         */
        'delete_statistics_older_than_days' => 60,

        /*
         * Use an DNS resolver to make the requests to the statistics logger
         * default is to resolve everything to 127.0.0.1.
         */
        'perform_dns_lookup' => true,
    ],

    'ssl' => [
        /*
         * Path to local certificate file on filesystem. It must be a PEM encoded file which
         * contains your certificate and private key. It can optionally contain the
         * certificate chain of issuers. The private key also may be contained
         * in a separate file specified by local_pk.
         */
        //'local_cert' => null,
        'local_cert' => '/var/www/sockettest/fullchain.pem',

        /*
         * Path to local private key file on filesystem in case of separate files for
         * certificate (local_cert) and private key.
         */
        //'local_pk' => null,
        'local_pk' => '/var/www/sockettest/privkey.pem',

        /*
         * Passphrase for your local_cert file.
         */
        //'passphrase' => null,
        'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
        'verify_peer' => false,
    ],

The error in the console log after quite some time throws this error:

WebSocket connection to 'wss://sub.mylaravapp.com:6001/app/58f20f3e6002cc53ba0a?protocol=7&client=js&version=4.4.0&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

If anyone have overcome this. Please let me see your example.
Hoping anyone could help.

Thanks!

edited by MattIPv4

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

I follow this SSL #109 and it work

Submit an Answer