Laravel websockets connection failed

Question

I've got a Laravel 8 API project along with a Nuxt JS front-end that uses Laravel Echo. I'm installed the Laravel Websockets server and have everything working just fine with the Pusher replacement config:

'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' => 6001,
        'scheme' => 'http'
    ],
],

It's also worth noting here that I've also tried:

'options' => [
    ...
    'port' => 6001,
    'scheme' => 'https'
],

and...

'options' => [
    ...
    'port' => 443,
    'scheme' => 'https'
],

However, when I deploy to my CentOS 8 server and start the websockets server with php artisan websockets:serve (I'm in debug mode) and I try to connect, I'm getting a connection failed error. I'm using the default port of 6001 and default host of 0.0.0.0 , the error I get from my front-end is:

WebSocket connection to 'wss://127.0.0.1/app/local?protocol=7&client=js&version=7.0.3&flash=false' failed:

My front-end is for example: https://example-gui.example.com/ whilst my running API is on https://example-api.example.com/ , both on the same server, and the same server as the running websockets server.

I'm using Cloudflare for HTTPs, and I'm not sure whether I need to change anything with the host?

I originally had the connection like this:

'wss://127.0.0.1/app/local?protocol=7&client=js&version=7.0.3&flash=false', when I run netstat -tulnp I do indeed see that port 6001 is in there.

What am I missing to connect in production?

I'm stuck in knowing how to get it to connect!

Answer 1

Looks like your front end is still trying to connect to the localhost version of the websocket server.

Try replacing that with your example-api URL.