Laravel Echo tries to connect wss instead ws

Question

I'm using replacement of Pusher Laravel Webaockets package.

In my application Laravel Echo tries to connect vía wss instead ws, so it fails.

My resources/js/bootstrap.js:

import Echo from 'laravel-echo'
window.Pusher = require('pusher-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,
    disableStats: true,
    encrypted: false,
    enabledTransports: ['ws'],
});

Broadcast connection in config/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' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],
        ],

My .env:

BROADCAST_DRIVER=pusher
...
PUSHER_APP_ID=1122334455
PUSHER_APP_KEY=lkjdsofsd9f8sd98f7s9dfuosdff9s87fsuyfsd76f8s7df6
PUSHER_APP_SECRET=secret1122334455fsdf897sd98f7sd88sd7f9s8d7f
PUSHER_APP_CLUSTER=eu

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

When a page of my application loads, inspecting the console I can see:

GET wss://localhost/app/lkjdsofsd9f8sd98f7s9dfuosdff9s87fsuyfsd76f8s7df6?protocol=7&client=js&version=6.0.3&flash=false

But if I run http://localhost:8000/laravel-websockets the request is vía ws and it's successfull:

Can you help me? Thanks

Ironing

Answer 1

Donwgrade pusher.js to 4.3 .Dont forget to compile afterwards.

Fablan

I don't like when downgrading is the solution ... but that fixed the problem. Thanks! – Ironing

You could also set forceTLS: false; when you bootsrap Echo. Source: github.com/beyondcode/laravel-websockets/issues/… – Dewy

No need to downgrade, just as @ZigaBenko said, set forceTLS to false. – Hutment

Answer 2

I've been struggling with this half of the day.

I was accessing my Laravel app from https:// so wss:// is forced. In my case http://crawler-manager.ddev.site finally worked to connect via ws://

Source: https://github.com/beyondcode/laravel-websockets/issues/378#issuecomment-1518744767

Leopoldoleor

Answer 3

pusher v8.4.0-rc2

I have a working ws but not wss and I had a problem when I ran http, I had ws working, but when I ran https, the connection was on wss and therefore the connection did not work. Setting Echo with the parameters forceTLS: false, encrypted: false, enabledTransports: ['ws'], did not force the ws protocol when running https. This is because the pusher library, when determining whether to force ws or wss, first checks location.protocol and then checks your forceTLS parameter and if location.protocol == https, it will always force wss. To fix the problem without downgrading the library and without tampering with the library you can do this:

import Echo from 'laravel-echo';

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

const OriginalRuntime = window.Pusher.Runtime;
window.Pusher.Runtime = {
    ...OriginalRuntime,
    getProtocol() {
        return 'http:'
    }
};

window.Echo = new Echo({
    broadcaster: 'pusher',
    forceTLS: false,
    encrypted: false,
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: process.env.MIX_WEBSOCKET_HOST,
    wsPort: process.env.MIX_WEBSOCKET_PORT,
    enabledTransports: ['ws'],
});

There may be more elegant ways to do this, but it worked for me.

Karlotte