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.

are you in production? does your server use https i.e. has a ssl certificate? — Uzair Riaz, May 06 '20 at 17:15
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. — Uzair Riaz, May 06 '20 at 17:21
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. — Uzair Riaz, May 06 '20 at 17:29
I even tried that @UzairRiaz. well i can access the websocket admin. but i got an SSL error. and events dont trigger — draw134, May 06 '20 at 17:38
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. — Uzair Riaz, May 06 '20 at 17:42
because when i visit my home, the `console.log` command will print something. but when i visit home it says `ERR_CERT_AUTHORITY_INVALID` — draw134, May 06 '20 at 17:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213255/discussion-between-uzair-riaz-and-vince). — Uzair Riaz, May 06 '20 at 17:46

score 18 · Answer 1 · answered Jun 01 '20 at 23:22

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.

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 — Armand, Jun 15 '20 at 22:45

score 6 · Accepted Answer · answered May 07 '20 at 10:37

6

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.

answered May 07 '20 at 10:37

Uzair Riaz

909
1
5
12

1

Had to spend hours until I found this! Thanks it works like a charm after downgrading! – Tharindu Thisarasinghe Sep 03 '20 at 09:01
2

Or you can add `forceTLS: false` to your Laravel Echo configuration and it'll work just as fine. :) – Jakye Apr 06 '21 at 23:24
It still doesn't work for me – mr-possible May 05 '23 at 21:55

score 1 · Answer 3 · answered Dec 31 '22 at 09:42

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

Laravel websocket cant connect to pusher ERR_CERT_AUTHORITY_INVALID

3 Answers3