Laravel websockets AWS EC2 - Connection failed

Question

I'm using laravel-websockets and is working like a charm in my local docker machine but I can't seem to make it work when I deploy it in the AWS EC2 machine.

This is the error message I get:

pusher.min.js:8 WebSocket connection to 
'wss://sample.project:6001/app/b0901feacd04936e?protocol=7&client=js&version=4.3.1&flash=false' failed:

These are my config files:

broadcasting.php

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

websockets.php

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

bootstrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    forceTLS: false,
    disableStats: true,
});

I've opened 6001 port in my security group:

But I can't make it work. I've tried a lot of the fixes in other SO questions but none worked, am I missing something? In desperate need of help here.

Thank you very much.

Answer 1

Your SSL settings in config/websockets.php should indicate they require two variables fron the .env file.

'ssl' => [
    'local_cert' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT', null),
    'local_pk' => env('LARAVEL_WEBSOCKETS_SSL_LOCAL_PK', null),
    'passphrase' => null,
    'verify_peer' => false,
],

Then over in your .env file, for local (in Valet) specify your test site's certs, ie:

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="/users/grant/.config/valet/Certificates/localsite.test.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="/users/grant/.config/valet/Certificates/localsite.test.key"

Alternatively, if it's on your Production environment, point it to your production SSL CRT & key:

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="/etc/nginx/ssl/yourprodsite.com/1231342/server.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="/etc/nginx/ssl/yourprodsite.com/1231342/server.key"

Your bootstrap.js (or similar) receiving JS end wouldn't really change - just ensure it matches what's in config/broadcasting.php :

import Echo from 'laravel-echo';
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'yoursite-pusher-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    disableStats: true,
});

Config counterpart config/broadcasting.php inside of the connections array:

'pusher' => [
    'driver' => 'pusher',
    'key' => 'yoursite-pusher-key',
    'secret' => 'yoursite-secret',
    'app_id' => 'yoursite',
    'options' => [
        'cluster' => 'main-cluster',
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'https',
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ]
    ],
],

Personally I could not get my setup to work without SSL & had to provide the SSL certificates accurately. Don't forget to use valet secure locally, if using Valet.

You can have a look here for more info regarding SSL.

Once you serve the Websockets using php artisan websockets:serve it's OK if it seems like it's stalling, navigate over to the frontend & hard refresh (CMD+SHIFT+R) or Win (CTRL+F5) and hopefully the connection will be established.

Ensure you are using latest libraries and if you have set up your JavaScript init scripts inside of a bootstrap you may need to run npm run dev or similar to compile assets.