Laravel websocket无法连接到pusher ERR_CERT_AUTHORITY_INVALID

Question

我有一个带websocket的laravel应用程序。我已经设置了websocket和pusher配置的所有需求。但是每当我测试我的广播频道时, 我得到了

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

当我做一些重新加载。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.

以下是我的配置。

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');
    }
}

软件包.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"
    }

我已经为我的pusher证书设置了环境。我是否需要在我的pusher中配置一些东西以使其工作？我有另一个项目，也是同样的设置，但它可以工作，但这个项目却不行。

Answer 1

尝试降级你的 pusher-js 包到版本 4.3.1. 这就是我正在使用的，它的工作原理。最新版本似乎总是听安全的 wss 而不是不安全的 ws.

Answer 2

在你的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,
    forceTLS: false, //<<<<=====CHANGE THIS
    // enabledTransports: ['ws', 'wss']
});

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

forceTLS选项的默认值是true，这将强制监听wss而不是ws。