beyondcode laravel-websocket not connecting on server

Question

I am trying to build a chat app and for that using beyondcode/laravel-websockets. When I used it in local it was working great but on the server can not make it run.

My Configurations are as follows

My Echo Settings (Js/Bootstrap.js)

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

My Pusher Settings (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'),
     'encrypted' => false,
     'host' => env('WEBSOCKET_HOST'),
     'port' => env('WEBSOCKET_PORT'),
     'scheme' => env('WEBSSOCKET_SCHEME'),
 ],
],

My Webscoket Settings (Websockets.php)

'dashboard' => [
       'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
],

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

My .env Configuration

PUSHER_APP_ID=MyDefaultIdForURMENU
PUSHER_APP_KEY=1234567
PUSHER_APP_SECRET=MyDefaultSecretForURMENU
PUSHER_APP_CLUSTER=mt1

WEBSOCKET_HOST = 127.0.0.1

WEBSOCKET_PORT = 6001

WEBSSOCKET_SCHEME= http

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Now when I run websocket either directly in ssh or using setsid using command

php artisan websockets:serve

OR

setsid php artisan websockets:serve

it shows

Starting the WebSocket server on port 6001...

But the console log is showing either

WebSocket connection to 'wss://mydomain.com/app/1234567?protocol=7&client=js&version=5.0.3&flash=false' failed: Error during WebSocket handshake: Unexpected response code: 404

OR Sometimes

WebSocket connection to 'ws://mydomain.com:6001/app/1234567?protocol=7&client=js&version=5.0.3&flash=false' failed: WebSocket is closed before the connection is established.

Please guide me what's I am doing wrong

Answer 1

Hi there guys I was having this problem and I searched the internet top to bottom and finally did the following to make it work on VPS

1- Config/broadcasting.php

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'useTLS' => true,
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'https',
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
        ]
    ]
]

2- Resources/js/bootstrap.js

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

3- Config/websockets.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' => null,
    'verify_peer' => false
],

4- .env

LARAVEL_WEBSOCKETS_SSL_LOCAL_CERT="../ssl/certs/filename.crt"
LARAVEL_WEBSOCKETS_SSL_LOCAL_PK="../ssl/keys/filename.key"

Step 3 and 4 are also important like 1 and 2 you need to provide .crt and .key files paths. The path can different for different servers you can move up to public_html folder in your cpanel file manager and find ssl folder for these files.