in Kubernetes pod, can't force Laravel Echo (using Pusher) to connect via ws over port 6001 protocol instead of wss on port 443

Viewed 601

I am having a hard time figuring out how to connect our Laravel app to a websockets server hosted on port 6001. Everything works fine on my local machine, but when I deploy on Kubernetes, I get the following errors in console:

Pusher :  : ["Connecting",{"transport":"ws","url":"wss://localhost:443/app/[redacted]?protocol=7&client=js&version=5.1.1&flash=false"}]
app.js:1 WebSocket connection to 'wss://localhost/app/[redacted]?protocol=7&client=js&version=5.1.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

It makes no sense to me that the url reported by Pusher is wss://localhost:443, but the actual connection is attempting at wss://localhost on port :80.

Furthermore, I've explicitly set enabledTransports: ['ws'], and have not provided a wssHost or wssPort.

Additionally, since this connection is taking place within a Kubernetes pod, I have taken every step to disable SSL. Below are my configs:

config/websockets.php:

...
    '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' => false,
            'enable_statistics' => true,
        ],
    ],
...

resources/js/store/state.js

...
import Echo from 'laravel-echo'
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

window.Pusher = require('pusher-js');
window.Pusher.logToConsole = true;

let state = {
        ads:{},
        latestAds: [],
        selectedAds: [],
        partCodes:[],
        carCodes:[],
        echo: new Echo({
            broadcaster: 'pusher',
            key: [redacted],
            wsHost: 'localhost',
            wsPort: 6001,
            disableStats: true,
            enabledTransports: ['ws'], // <- added this param
            auth: {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('admanager-token'),
                    'X-CSRF-Token': "CSRF_TOKEN"
                }
            },
            'cluster': 'eu',
        })

    }

export default state
...
1 Answers

In your config/broadcasting.php, you should try this:

'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'),
                'useTLS' => false,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
                'encrypted' => false,
            ],
        ],

While on front-end make sure three components are in sync:

  • wsHost
  • wsPort
  • and app_key
Related