Laravel-websockets: Firefox can’t establish a connection to the server at wss://ws-ap2.pusher.com/app/myKey

[ghost]

i'm trying to create a realtime app with laravel-websockets package, i followed the steps in laravel documents and also the laravel-websockets package and i did all the thing exact the same as docs, but whenever i try to send an event through the channel i receive this error in the browser console: Firefox can’t establish a connection to the server at wss://127.0.0.1/app/myKey?protocol=7&client=js&version=6.0.3&flash=false.

does any body how can i solve this error?

[micos7]

Try downgrading pusher.js to 4.3 something from 6,if that`s your case also. Don`t forget to compile afterwards.

[ghost]

Try downgrading pusher.js to 4.3 something from 6,if thats your case also. Dont forget to compile afterwards.

done, it works now. thanks a lot bro

[ohidere]

Hello,
I'd like to leave this issue open, as I'm experiencing it using Laravel Websockets on my local environment. I strictly followed each step in the documentation but I get the same error: ERR:CONNECTION_REFUSED on all browsers.

I have tried turning off my Antivirus Firewall with no success.

[micos7]

Can you show your pusher config on the js side?

[ohidere]

I haven't configured anything myself yet.
The dashboard page is giving me this error.. Please see the configuration on this page: https://codeshare.io/5o3YMg

[ohidere]

Problem solved

For anyone running into this problem, what helped for me was to SSH into Homestead first, browse to the project folder and then running php artisan websockets:serve instead of doing it from the outside.

[mralston]

pusher-js defaults to using TLS (wss) unless you explicitly tell it not to. Try this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

See my explanation in this thread for more details:

https://github.com/beyondcode/laravel-websockets/issues/378

[leefrankie1994]

@mralston Thx, you saved my day.

[cuartas15]

@mralston

pusher-js defaults to using TLS (wss) unless you explicitly tell it not to. Try this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

See my explanation in this thread for more details:

378

What about live environments, should we leave this false still?

[mralston]

@mralston

pusher-js defaults to using TLS (wss) unless you explicitly tell it not to. Try this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

See my explanation in this thread for more details:

378

What about live environments, should we leave this false still?

Ideally in your live environment the websocket server you're talking to would have TLS, therefore no, you wouldn't want this in a live environment.

However, this issue is covering a scenario where the websocket server does not use TLS. Hopefully, that's only whilst testing locally, but it isn't really linked to whether your environment is live or development, it's just a matter of whether the websocket server is using TLS or not.

[cuartas15]

@mralston

pusher-js defaults to using TLS (wss) unless you explicitly tell it not to. Try this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

See my explanation in this thread for more details:

378

What about live environments, should we leave this false still?

Ideally in your live environment the websocket server you're talking to would have TLS, therefore no, you wouldn't want this in a live environment.

However, this issue is covering a scenario where the websocket server does not use TLS. Hopefully, that's only whilst testing locally, but it isn't really linked to whether your environment is live or development, it's just a matter of whether the websocket server is using TLS or not.

I'm really ignorant in server management stuff with minimum knowledge about it, I have a digital ocean server configured an managed with Laravel Forge, do you think they set up TLS automatically?

[mralston]

@mralston

pusher-js defaults to using TLS (wss) unless you explicitly tell it not to. Try this:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

See my explanation in this thread for more details:

378

What about live environments, should we leave this false still?

Ideally in your live environment the websocket server you're talking to would have TLS, therefore no, you wouldn't want this in a live environment.
However, this issue is covering a scenario where the websocket server does not use TLS. Hopefully, that's only whilst testing locally, but it isn't really linked to whether your environment is live or development, it's just a matter of whether the websocket server is using TLS or not.

I'm really ignorant in server management stuff with minimum knowledge about it, I have a digital ocean server configured an managed with Laravel Forge, do you think they set up TLS automatically?

I honestly don’t know what you get with Digital Ocean and Laravel Forge as I’ve never used either. If they provide a managed websockets server then I’m sure it will use TLS. I’d be surprised if it’s part of the Laravel Forge offering as beyondcode/laravel-websockets is third party. If you have to set it up yourself then it’s down to however you set it up. Bear in mind that this conversation is only pertinent to beyondcode/laravel-websockets for running your own websockets server, the most common use case with Laravel is to use Pusher, which is a managed service that I’m sure will have TLS.

[alansary]

This worked for me

broadcasting.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' => '127.0.0.1',
            'port' => 8443,
            'scheme' => 'https',
            'curl_options' => [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ]
        ],
    ],

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

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

    'null' => [
        'driver' => 'null',
    ],

],

];
`

websockets.php
`
return [

/*
 * Set a custom dashboard configuration
 */
'dashboard' => [
    'port' => env('LARAVEL_WEBSOCKETS_PORT', 8443),
],

/*
 * 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'),
        'path' => env('PUSHER_APP_PATH'),
        'capacity' => null,
        'enable_client_messages' => true,
        'enable_statistics' => true,
        'encrypted' => 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,

    /**
     * The Statistics Logger will, by default, handle the incoming statistics, store them
     * and then release them into the database on each interval defined below.
     */
    'logger' => BeyondCode\LaravelWebSockets\Statistics\Logger\HttpStatisticsLogger::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,

    'allow_self_signed' => true,
],

/*
 * 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,

];

`

bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 8443,
    wssPort: 8443,
    forceTLS: true,
    disableStats: false,
    enabledTransports: ['ws', 'wss']
});

.env

BROADCAST_DRIVER=pusher
APP_URL_BASE=DOMAIN_NAME_HERE
APP_URL=https://${APP_URL_BASE}
LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT=/etc/letsencrypt/live/DIR_NAME_HERE/fullchain.pem
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK=/etc/letsencrypt/live/DIR_NAME_HERE/privkey.pem

/etc/supervisorctl/conf.d/websockets.conf

[program:websockets]
process_name=%(program_name)s
command=sudo php artisan websockets:serve --port=8443
directory=/var/www/html/PROJECT_NAME_HERE
autostart=true
autorestart=true
user=root
redirect_stderr=true
stdout_logfile=/var/www/html/PROJECT_NAME_HERE/storage/logs/websockets.log