标签: laravel-websockets

我有一个带有 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.

这是我的配置。

广播.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'), …

我想知道我的用户何时出现连接错误或连接断开。我读过很多文章说这是可能的，但我一无所获，我开始认为这可能是我正在使用的第三方（例如https://github.com/beyondcode/laravel-websockets ）的问题，有人遇到过这样的问题吗？

以下根本不产生任何日志。

window.Echo.connector.pusher.bind('reconnect', (channel, data) => {
    console.log('RE-CONNECTED');
});

window.Echo.connector.pusher.bind('reconnecting', (channel, data) => {
    console.log('re-connecting...');
});

window.Echo.connector.pusher.bind('reconnect_error', (channel, data) => {
    console.log('reconnection error!');
});

window.Echo.connector.pusher.bind('reconnect_attempt', (channel, data) => {
    console.log('re-connecting...');
});

window.Echo.connector.pusher.bind('connect_error', (channel, data) => {
    console.log('connect error...');
});

window.Echo.connector.pusher.bind('error', (channel, data) => {
    console.log('error...');
});

window.Echo.connector.pusher.bind_global((channel, data) => {
    console.log(channel, data);
});

如果我使用建议的类似内容

window.Echo.connector.socket.on('connect_error', function(){
    console.log('connected', window.Echo.socketId());
});

window.Echo.connector.socket.on('connect', function(){
    console.log('connected', window.Echo.socketId());
});

window.Echo.connector.socket.on('disconnect', function(){
    console.log('disconnected');
});

window.Echo.connector.socket.on('reconnecting', function(attemptNumber){
    console.log('reconnecting', attemptNumber);
});

我明白了Uncaught TypeError: Cannot read …

我知道我不是第一个为此苦苦挣扎的人。但几天后，经过很多相关的问题，我觉得我的案子值得它自己的问题:)。

我有一个可用的 websocket 解决方案，包括 Laravel Websockets ( https://beyondco.de/docs/laravel-websockets/getting-started/introduction ) 和用于公共频道的 Laravel Echo 。我的客户端应用程序是一个 vue-cli 应用程序，连接到服务器+公共频道上的广播消息效果很好。授权由 Laravel Passport 处理。因此，通过在授权标头中发送承载令牌，后端应用程序可以知道用户是否已通过身份验证。

然而，我正在努力让私人频道正常工作。尝试进行身份验证总是给我这个错误：

Access to XMLHttpRequest at 'https://my-app.test/broadcasting/auth' from origin 'https://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我知道当我遇到服务器问题时会出现此 CORS 错误，因此我尝试在 Insomnia 中调试请求。然而，当模仿 Insomnia 中的请求时，它会给出响应 200 以及预期的结果：

我一直在阅读一些指南和 stackoverflow 问题，但找不到类似的内容。回到它可能是 CORS 问题，但我认为情况并非如此。我的 OPTIONS 请求返回得很好。

为了完整起见，我还添加了一些可能有助于调试的代码。

我的广播服务提供商

public function boot()
{
    Broadcast::routes(['middleware' => ['auth:api']]);

    require base_path('routes/channels.php');
}

我的频道.php …

我想安装 Laravel Web-Socket 包，但是当我运行此命令时遇到一些错误 Composer require Beyondcode/laravel-websockets

对 Beyondcode/laravel-websockets 使用版本 ^1.12 运行 Composer update Beyondcode/laravel-websockets --with-all-dependencies 使用包信息加载 Composer 存储库 更新依赖项 您的需求无法解析为一组可安装的包。

问题 1 - 根 Composer.json 需要 laravel/framework ^8.65，找到 laravel/framework[v8.65.0, ..., 8.x-dev] 但这些未加载，可能是因为它与另一个需求冲突。

安装失败，将 ./composer.json 和 ./composer.lock 恢复为其原始内容。

这是我的composer.json：

{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"require": {
    "php": "^7.3|^8.0",
    "fruitcake/larAavel-cors": "^2.0",
    "guzzlehttp/guzzle": "^7.0.1",
    "laravel/framework": "^8.65",
    "laravel/sanctum": "^2.11",
    "laravel/tinker": "^2.5"
},

"require-dev": {
    "facade/ignition": "^2.5",
    "fakerphp/faker": "^1.9.1",
    "laravel/sail": "^1.0.1",
    "mockery/mockery": "^1.4.4",
    "nunomaduro/collision": "^5.10", …

在 Laravel 10.8框架中使用 Beyondcode/laravel-websockets包，那么它会在命令提示符中导致如下错误

"require": {
        "php": "^8.1",
        "beyondcode/laravel-websockets": "^1.14",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^10.8",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8"
    }