Report this

What is the reason for this report?

Configuring Laravel-websockets with ssl on nginx

Posted on September 26, 2020

I have been trying to connect websockets with laravel on nginx with ssl but i have been getting this error. It works fine on my local computer.

I have been getting this error in the console:

app.js:2 WebSocket connection to 'wss://www.site-name.com:6001/app/key?protocol=7&client=js&version=4.3.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

I have tried many different things and been trying for 3 days.

Here are my files:

config/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'),
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'https',

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

            ],
  
        ],

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

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

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

    ],

];

config/websockets.php

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'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            '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' => '/etc/letsencrypt/live/site-name.com/fullchain.pem',



    /*

     * Path to local private key file on filesystem in case of separate files for

     * certificate (local_cert) and private key.

     */
   
    'local_pk' => '/etc/letsencrypt/live/site-name.com/privkey.pem',



    /*

     * Passphrase with which your local_cert file was encoded.

     */

    '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,
];

resources/js/bootstrap.js

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

Any help would be great.



This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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.

Have you managed to find a solution?

Have you got any solution for this?

An update on an older topic

The issue you’re encountering seems related to SSL configuration for WebSocket connections. The error Error in connection establishment: net::ERR_CONNECTION_REFUSED often indicates problems at the network level, usually due to misconfiguration of server or client, or issues with certificates.

Let’s review your configuration and outline potential solutions:

1. Nginx Configuration for WebSockets

First, ensure your Nginx configuration is set up to handle WebSocket connections with SSL properly:

server {
    server_name www.site-name.com;
    
    # ... SSL configuration here ...

    location / {
        proxy_pass http://127.0.0.1:6001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # ... Rest of your configuration ...
}

The issue you’re encountering seems related to SSL configuration for WebSocket connections. The error Error in connection establishment: net::ERR_CONNECTION_REFUSED often indicates problems at the network level, usually due to misconfiguration of server or client, or issues with certificates.

Let’s review your configuration and outline potential solutions:

1. Nginx Configuration for WebSockets

First, ensure your Nginx configuration is set up to handle WebSocket connections with SSL properly:

nginxCopy code server { server_name www.site-name.com; # ... SSL configuration here ... location / { proxy_pass http://127.0.0.1:6001; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # ... Rest of your configuration ... }

This configuration ensures that Nginx correctly proxies WebSocket connections to your Laravel WebSocket server running on port 6001.

2. Laravel WebSockets SSL Configuration

The SSL configuration in config/websockets.php seems correct. Ensure that the path to the SSL certificate and private key are accurate and accessible by the Laravel application.

3. Laravel Echo Configuration

Your Laravel Echo configuration in resources/js/bootstrap.js seems to enforce TLS (forceTLS: true). Ensure that the WebSocket server (laravel-websockets package) is correctly set up to handle WSS (WebSocket Secure) connections. The Nginx configuration should handle the SSL termination, so Echo’s connection is proxied through Nginx.

4. Firewall and Ports

  • Verify that your server’s firewall settings allow inbound connections on port 6001.
  • If your server is behind a load balancer or cloud firewall (like on AWS, DigitalOcean, etc.), ensure that the relevant ports are open.

5. Laravel WebSockets Service Running

Ensure the Laravel WebSockets server is running. You need to start it manually using Artisan or set it up as a service to run in the background:

php artisan websockets:serve

6. Debugging

  • Use the Laravel WebSockets dashboard (accessible via /laravel-websockets by default) to test the connection.
  • Check your server’s error logs for any relevant messages.
  • For frontend debugging, use the browser’s developer tools (Console and Network tabs) to see if there are more descriptive error messages.

7. Certificate Permissions

Make sure the user running your Laravel application has the necessary permissions to read the SSL certificate and private key files.

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.