Laravel-websockets: Error when using https (encrypted)

[ElegantSoft]

When I use http unencrypted all things works fine
but after using https the connection opens but when broadcast(Event) it gives me error

{message: "", exception: "Illuminate\Broadcasting\BroadcastException",…} exception: "Illuminate\Broadcasting\BroadcastException" file: 
"/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/PusherBroadcaster.php" line: 117 message: "" trace: [{,…}, {function: "handle", class: 
"Illuminate\Broadcasting\BroadcastEvent", type: "->"},
 {,…}, {,…},…] 0: {,…}
 class: "Illuminate\Broadcasting\Broadcasters\PusherBroadcaster" file: 
"/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Broadcasting/BroadcastEvent.php" function: "broadcast" line: 48 type: "->" 1: {function: "handle", class: 
"Illuminate\Broadcasting\BroadcastEvent", type: "->"} 2: {,…} file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Container/BoundMethod.php" function: "call_user_func_array" line: 29 3: {,…} 4: {,…} 5: {,…} 6: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Bus/Dispatcher.php",…} 7: {,…} 8: {,…} 9: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Bus/Dispatcher.php",…} 10: {,…} 11: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Queue/Jobs/Job.php",…} 12: {,…} 13: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Queue/Queue.php",…} 14: {,…} 15: {,…} 16: {,…} 17: {,…} 18: {,…} 19: {file: "/Applications/MAMP/htdocs/saafca/app/Http/Controllers/users/CheckoutController.php", line: 37,…} 20: {function: "addCredit", class: "App\Http\Controllers\users\CheckoutController", type: "->"} 21: {,…} 22: {,…} 23: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Route.php",…} 24: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Route.php",…} 25: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Router.php",…} 26: {,…} 27: {,…} 28: {,…} 29: {,…} 30: {,…} 31: {,…} 32: {,…} 33: {,…} 34: {,…} 35: {,…} 36: {,…} 37: {,…} 38: {,…} 39: {,…} 40: {,…} 41: {,…} 42: {,…} 43: {,…} 44: {,…} 45: {,…} 46: {,…} 47: {,…} 48: {,…} 49: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Router.php",…} 50: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Router.php",…} 51: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Router.php",…} 52: {file: "/Applications/MAMP/htdocs/saafca/vendor/laravel/framework/src/Illuminate/Routing/Router.php",…} 53: {,…} 54: {,…} 55: {file: "/Applications/MAMP/htdocs/saafca/vendor/fideloper/proxy/src/TrustProxies.php", line: 57,…} 56: {,…} 57: {,…} 58: {,…} 59: {,…} 60: {,…} 61: {,…} 62: {,…} 63: {,…} 64: {,…} 65: {,…} 66: {,…} 67: {,…} 68: {,…} 69: {,…} 70: {,…} 71: {,…} 72: {,…} 73: {file: "/Applications/MAMP/htdocs/saafca/public/index.php", line: 55, function: "handle",…} class: "Illuminate\Foundation\Http\Kernel" file: "/Applications/MAMP/htdocs/saafca/public/index.php" function: "handle" line: 55 type: "->" Name

My bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    disableStats: true,


});

websocket.php

<?php

use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;

return [

    /*
     * This package comes with multi tenancy out of the box. Here you can
     * configure the different apps that can use the webSockets server.
     *
     * Optionally you can disable client events so clients cannot send
     * messages to each other via the webSockets.
     */
    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ],


    /*
     * This class is responsible for finding the apps. The default provider
     * will use the apps defined in this config file.
     *
     * You can create a custom provider by implementing the
     * `AppProvider` interface.
     */
    'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class,

    /*
     * This array contains the hosts of which you want to allow incoming requests.
     * Leave this empty if you want to accept requests from all hosts.
     */
    'allowed_origins' => [
        //
    ],

    /*
     * The maximum request size in kilobytes that is allowed for an incoming WebSocket request.
     */
    'max_request_size_in_kb' => 250,

    /*
     * This path will be used to register the necessary routes for the package.
     */
    'path' => 'laravel-websockets',

    /*
     * Dashboard Routes Middleware
     *
     * These middleware will be assigned to every dashboard route, giving you
     * the chance to add your own middleware to this list or change any of
     * the existing middleware. Or, you can simply stick with this list.
     */
    'middleware' => [
        'web',
        Authorize::class,
    ],

    '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' => false,
    ],

    /*
     * Define the optional SSL context for your WebSocket connections.
     * You can see all available options at: http://php.net/manual/en/context.ssl.php
     */
    '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' =>  "/Users/sasuke/ssl/server.crt",

        /*
         * Path to local private key file on filesystem in case of separate files for
         * certificate (local_cert) and private key.
         */
        'local_pk' =>  "/Users/sasuke/ssl/server.key",

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

    /*
     * Channel Manager
     * This class handles how channel persistence is handled.
     * By default, persistence is stored in an array by the running webserver.
     * The only requirement is that the class should implement
     * `ChannelManager` interface provided by this package.
     */
    'channel_manager' => \BeyondCode\LaravelWebSockets\WebSockets\Channels\ChannelManagers\ArrayChannelManager::class,
];

broadcasting.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        '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' => 'localhost',
                'port' => 6001,
                'scheme' => 'https'
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

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

    ],

];

[sedrak1987]

try encrypted: false

[francislavoie]

Is it a self-signed cert? If so, that won't work out of the box, because cURL can't trust the certificate provided by laravel-websockets over HTTPS.

Instead, I recommend using https://github.com/FiloSottile/mkcert to make yourself a local CA and add it to your trust store, for development. In prod, you'll need to use a real cert. You can use Caddy and/or Let's Encrypt to issue one.

[rennokki]

Add some CURLOPT options:

'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' => env('PUSHER_APP_SCHEME', 'http'),
        'encrypted' => true,
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ],
    ],
],