Laravel websocket cant connect to pusher ERR_CERT_AUTHORITY_INVALID

Question

I have a laravel application with websockets. I already setup all the needs for the websocket and pusher config. But whenever I test my broadcast channel I got

app.js:58283 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

When i do some reload. sometimes i get app.js:55791 WebSocket connection to 'wss://127.0.0.1/app/644a4ac1988060882370?protocol=7&client=js&version=6.0.2&flash=false' failed: WebSocket is closed before the connection is established.

Here are my configs.

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' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http',
            ],
        ],

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,
            'verify_peer' => false,
        ],
    ],

bootstrap.js

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxx',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    // enabledTransports: ['ws', 'wss']
});

window.Echo.channel('Inventory').listen('InventoryEvent',(e)=>{
    console.log(e)
})

web.php

Route::get('/', function () {
    broadcast(new InventoryEvent('somedata'));
    return view('welcome');
});

InventoryEvent

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class InventoryEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $somedata;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($somedata)
    {
        $this->somedata = $somedata;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('Inventory');
    }
}

package.json

    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "admin-lte": "^3.0.4",
        "fusioncharts": "^3.15.1-sr.1",
        "laravel-echo": "^1.7.0",
        "pusher-js": "^6.0.2",
        "sweetalert2": "^9.10.9",
        "vue-fusioncharts": "^3.0.4",
        "vue-moment": "^4.1.0",
        "vue-router": "^3.1.6",
        "vue-select": "^3.9.5"
    }

I already setup the env for my pusher credentials. Do i need to config something in my pusher in order for this to work? I got another project with the same setup but it works but this one is not.

Sevenup

are you in production? does your server use https i.e. has a ssl certificate? – Rootstock

no, I am using my local computer/localhost @UzairRiaz – Sevenup

in broadcasting.php set 'encrypted' => false for options. run php artisan optimize:clear and try again. If it works I'll post it as an answer so you can accept it. – Rootstock

I tried that before but it does not work for me @UzairRiaz – Sevenup

set encrypted to false anyway, its supposed to be true only for production. After that, run php artisan websockets:serve if you are not already and try connecting to your dashboard, which you can access at {your_base_app_url}/laravel-websockets. If it connects successfully, your config is good. I can guide you further from there. – Rootstock

I even tried that @UzairRiaz. well i can access the websocket admin. but i got an SSL error. and events dont trigger – Sevenup

How do you know events don't trigger? try running php artisan queue:work in another terminal along with websockets:serve. It dispatches your queued events. – Rootstock

because when i visit my home, the console.log command will print something. but when i visit home it says ERR_CERT_AUTHORITY_INVALID – Sevenup

see my bootstrap.js and web.php – Sevenup

Let us continue this discussion in chat. – Rootstock

Answer 1

Try downgrading your pusher-js package to version 4.3.1. Thats what I am using and it works well. Latest version always seems to listen on secure wss instead of the non-secure ws.

Rootstock

Had to spend hours until I found this! Thanks it works like a charm after downgrading! – Billowy

Or you can add forceTLS: false to your Laravel Echo configuration and it'll work just as fine. :) – Gorizia

It still doesn't work for me – Jot

Answer 2

in your bootstrap.js file, try changing:

import Echo from "laravel-echo"
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'xxxxxxxxxxxxxxx',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false, //<<<<=====CHANGE THIS
    // enabledTransports: ['ws', 'wss']
});

window.Echo.channel('Inventory').listen('InventoryEvent',(e)=>{
    console.log(e)
})

the default value of the forceTLS option is true, which forces listening on wss instead of ws.

Softwood

This should be accepted solution. Downgrading to lower version could be a solution but older versions might not be as safe in terms of security – Euchromatin

@Euchromatin I'm not sure how potentially connecting without encryption would assuage any security concerns? – Feudal

Answer 3

I had a similar issue. I did a whole lots of debugging not knowing I was missing a very simple thing which wasn't so simple after all:) In my ../config/websockets.php file only one IP address was permitted. I had to comment it

'allowed_origins' => [
    //'124.0.0.1',
    //
],

Atalayah

Answer 4

1. In laravel config/broadcasting.php , in 'pusher' config, under 'options' I've set the 'encrypted' to false

2. In my laravel resources/js/bootstrap.js is set the forceTLS to false, and encrypted to false, example:

   window.Echo = new Echo({ broadcaster: 'pusher', key: import.meta.env.VITE_PUSHER_APP_KEY, cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1', wsHost: import.meta.env.VITE_PUSHER_HOST, // Use wssHost instead of wsHost wssHost: import.meta.env.VITE_PUSHER_HOST, // Use wssHost instead of wsHost wssPort: import.meta.env.VITE_PUSHER_PORT, // Use wssPort instead of wsPort wsPort: import.meta.env.VITE_PUSHER_PORT, // Use wssPort instead of wsPort forceTLS: false, // Set forceTLS to true for secure connection encrypted: false, // Set encrypted to true for secure connection disableStats: true, enabledTransports: ['ws', 'wss'], // Specify wss as the only transport });

3. I've set PUSHER_SCHEME=http in .env file

4. I've opened my app exclusively with "http://" protocol, on one browser and on another browser on my server / same computer / dev computer. Real time communication works from one side to another in my webchat app!!

But then I've tried to send a message from mobile + mobile internet (outside wifi - external), and in my computer it listened for the event properly and showed the new message.. but when I send from the computer, on my phone I don't get the real time message / it seems to not listen... I wonder if it's the same problem because of being "WS" or "WSS" (secure connection or not). Any idea anyone? Github repo: https://github.com/Pablo-Camara/Chat-Rooms

I'm still to try from external net / phone to external net / phone, but somethings tells me it won't work. Edit: I tested from virtual computer/browser on Edge, and another Firefox, and between them the communication is not real time! only on my host machine it works! could it be something on cloudflare? could it be that i really need to setup secure soketi / websocket connection? "wss" instead of "ws" ?

Kersten

Answer 5

For some cases you have just to run websockets with sudo: sudo php artisan websockets:serve

Chaff