Laravel WebSocket 无法连接到 Pusher ERR_CERT_AUTHORITY_INVALID

8

我有一个使用Websockets的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');
});

库存事件

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"
    }

我已经设置好我的Pusher凭证的环境了。我需要在我的Pusher中配置一些东西才能让它工作吗? 我有另一个使用相同设置的项目,但它可以正常工作,但是这个不能。


不,我正在使用我的本地计算机/localhost @UzairRiaz - draw134
1
broadcasting.php 中为 options 设置 'encrypted' => false。运行 php artisan optimize:clear,然后再试一次。如果可以的话,我会将其发布为答案,以便您接受它。 - Uzair Riaz
将encrypted设置为false,无论如何,它只应该在生产环境下设置为true。之后,如果您尚未运行,请执行php artisan websockets:serve并尝试连接到您的仪表板,您可以通过** {your_base_app_url}/laravel-websockets **访问它。如果成功连接,您的配置是正确的。我可以从那里进一步指导您。 - Uzair Riaz
你怎么知道事件没有触发?尝试在另一个终端中运行 php artisan queue:workwebsockets:serve。这将调度你排队的事件。 - Uzair Riaz
让我们在聊天中继续这个讨论 - Uzair Riaz
显示剩余5条评论
4个回答

18

在你的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进行监听。


3
这应该是被接受的解决方案。降级到较低版本可能是一种解决方法,但是旧版本在安全方面可能不如现在的版本安全。 - Armand

7

尝试将您的 pusher-js 包降级到版本 4.3.1。这是我正在使用的版本,它可以很好地工作。最新版本似乎总是使用安全的 wss 监听,而不是非安全的 ws


1
找了好几个小时才找到这个解决方法!降级后终于可以完美运行了,谢谢! - Tharindu Thisarasinghe
2
或者您可以在Laravel Echo配置中添加 forceTLS: false,它也能正常工作。 :) - Jakye
它对我仍然不起作用。 - mr-possible

1
在laravel的config/broadcasting.php文件中,在'pusher'配置下,我将'encrypted'设置为false。
在我的laravel的resources/js/bootstrap.js文件中,将forceTLS设置为false,encrypted设置为false,示例代码如下:
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, // 使用wssHost代替wsHost wssHost: import.meta.env.VITE_PUSHER_HOST, // 使用wssHost代替wsHost wssPort: import.meta.env.VITE_PUSHER_PORT, // 使用wssPort代替wsPort wsPort: import.meta.env.VITE_PUSHER_PORT, // 使用wssPort代替wsPort forceTLS: false, // 设置forceTLS为true以进行安全连接 encrypted: false, // 设置encrypted为true以进行安全连接 disableStats: true, enabledTransports: ['ws', 'wss'], // 指定wss作为唯一的传输方式 });
我在.env文件中将PUSHER_SCHEME设置为http。
我在一个浏览器上以“http://”协议独占打开了我的应用程序,在另一个浏览器上以同一台服务器/同一台计算机/开发计算机上打开。实时通信在我的Web聊天应用程序中从一侧到另一侧都可以正常工作!
但是后来我试图从手机+移动互联网(在无线网络之外-外部)发送消息,我的电脑正确地接收到了事件并显示了新消息... 但是当我从电脑发送时,手机上没有实时收到消息/似乎没有监听... 我想知道是否因为是"WS"或"WSS"(安全连接与否)导致的同样的问题。 有人有什么想法吗?Github仓库:https://github.com/Pablo-Camara/Chat-Rooms 我还没有尝试从外部网络/手机到外部网络/手机,但是有些事情告诉我它不会起作用。编辑:我在Edge上测试了虚拟计算机/浏览器,还有另一个Firefox,它们之间的通信不是实时的!只有在我的主机上才能工作!这可能是Cloudflare的问题吗?我真的需要设置安全的Soketi/Websocket连接吗?使用"wss"而不是"ws"吗?

1
我遇到了类似的问题。我一直在进行调试,却不知道自己缺少了一个非常简单的东西,但其实并不那么简单 :) 在我的../config/websockets.php文件中,只允许一个IP地址连接。我不得不将其注释掉。
'allowed_origins' => [
    //'124.0.0.1',
    //
],

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接