Laravel-websockets: redirecting to wss instead of ws on localhost v1.3

[sairum123]

I am using laravel version 5.7 and beyondcode\laravel-websockets package v1.3 the problem I am facing right now is when I am running it on localhost I am getting this error

WebSocket connection to 'wss://localhost/app/somekey?protocol=7&client=js&version=6.0.2&flash=false' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

I have changed encrypted to false in bootsrap.js still it connects to wss instead of ws

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,
    encrypted: false,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true
});

broadcasting.php config

'connections' => [

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

[intergalactisch]

I also have this same error. Is this a Chrome or a Laravel thing?

[sairum123]

its a laravel thing

[pietrantonio91]

Same issue, following.

[pietrantonio91]

I solved by downgrading pusher-js to 4.3

[KuenzelIT]

Maybe the config options for pusher-js 6 changed, which are not reflected in Echo yet? I may look into it later.

[mralston]

Same problem. I did a little experimenting.

TL;DR - set forceTLS: false when you bootstrap Echo:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false // Critical if you want to use a non-secure WebSocket connection
});

Explanation:

I found that the useTLS was set to true when the code inside pusher-js attempts establish the web socket connection. I was unable to change useTLS to false when bootstrapping Echo, useTLS is always true inside pusher-js.

If I modify the pusher-js code as follows, it connects:

TransportConnection.prototype.connect = function () {
        var _this = this;
        if (this.socket || this.state !== 'initialized') {
            return false;
        }

        // Add this line to override force useTLS=false
        this.options.useTLS = false;

        var url = this.hooks.urls.getInitial(this.key, this.options);
        try {
            this.socket = this.hooks.getSocket(url, this.options);
        }
        ...

Obviously, this isn't a workable solution, this modification will be overwritten the next time npm compiles the JS.

This may be the culprit, in pusher-js:

function shouldUseTLS(opts) {
    if (runtime.getProtocol() === 'https:') {
        return true;
    }
    else if (opts.forceTLS === false) {
        return false;
    }
    return true;
}

See how it returns true by default? The result of this function is used to populate the useTLS option.

From that function, I deduced that setting the option forceTLS to false would solve the issue (and it does).

[akyagmur]

@mralston Thanks! forceTLS option solved my issue.