Cannot cannot with wss/https Laravel Websockets with Pusher - laravel

Question

EDIT:
The below code is all working, it turned out the SSLs I have been using prior to changing them were good after all, but that something else was wrong when they were good. I will delete this post.
I have searched through many many pages online with various solutions and unfortunately none have worked. I am getting errors from the browser:
Firefox can’t establish a connection to the server at wss://MYDOMAIN:6001/app/MYAPPID?protocol=7&client=js&version=7.0.6&flash=false.
And in Chrome:
WebSocket connection to 'wss://MYDOMAIN:6001/app/MYAPPID?protocol=7&client=js&version=7.0.6&flash=false' failed:
I managed to get it working perfectly, even in production but only when I do not load https (I temporarily turned off my forcing of redirect to https to test).
However with https I have ran out of ideas.
Obviously with everything below in place, and cache in all places cleared I run:
php artisan websockets:serve
The result in the terminal is that it stays on Starting the WebSocket server on port 6001... with no other activity.
Its worth noting that when I do try to broadcast an event in Laravel I get no errors, whereas if I change settings (e.g. put in a wrong path for the SSL, or take something out of the broadcasting.php config, I do get an error that I cannot connect to pusher. So I am assuming based on this my config with pusher is ok.
config/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'),
'host' => '127.0.0.1',
'port' => 6001,
'scheme' => 'https',
'useTLS' => true,
'encrypted' => true,
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
],
'redis' => [
'driver' => 'redis',
'connection' => 'default',
],
'log' => [
'driver' => 'log',
],
'null' => [
'driver' => 'null',
],
],
];
/config/websockets.php
<?php
use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;
return [
/*
* Set a custom dashboard configuration
*/
'dashboard' => [
'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
],
/*
* 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 specify capacity so you can limit the maximum
* concurrent connections for a specific app.
*
* 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' => true,
'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' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
/*
* Path to local private key file on filesystem in case of separate files for
* certificate (local_cert) and private key.
*/
'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
/*
* Passphrase for your local_cert file.
*/
'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_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,
];
my ts file:
window.pusher = new Pusher('MYAPPID', {
cluster: 'mt1',
forceTLS: true,
enabledTransports: ['ws', 'wss'],
wssPort: 6001,
wsPort: 6001,
wsHost: 'MYDOMAIN'
});
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'MYAPPKEY',
cluster: 'mt1',
wsHost: 'MYDOMAIN',
wssPort: 6001,
wsPort: 6001,
forceTLS: true,
enabledTransports: ['ws', 'wss'],
encrypted: true,
disableStats: true
});
.env: Note, for the SSLs, I tried my own domain SSLs, they did not work so I then followed these instructions to generate them.
PUSHER_APP_ID=MYAPPID
PUSHER_APP_KEY=MYAPPKEY
PUSHER_APP_SECRET=MYAPPSECRET
PUSHER_APP_CLUSTER=mt1
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="/path/to/mycert.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="/path/to/mycert.key"
BROADCAST_DRIVER=pusher