Laravel websockets AWS EC2 - Connection failed - php

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.