Laravel 11 Reverb 和 React Websocket 连接错误

Question

我正在尝试构建一个实时聊天应用程序，但在从 React 连接到我的 Reverb 服务器时遇到问题。我收到的错误消息如下：runtime.ts:115 WebSocket connection to 'wss://localhost:8080/app/knycnmdeg1hemq2vnt1i?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: .

你能帮我解决这个问题吗？

这是我的.env

REVERB_APP_ID=147846
REVERB_APP_KEY=knycnmdeg1hemq2vnt1i
REVERB_APP_SECRET=xccoqs0txoecjmjw8ol5
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

BROADCAST_CONNECTION=reverb

这是我的广播.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "reverb", "pusher", "ably", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_CONNECTION', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over WebSockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'reverb' => [
            'driver' => 'reverb',
            'key' => env('REVERB_APP_KEY'),
            'secret' => env('REVERB_APP_SECRET'),
            'app_id' => env('REVERB_APP_ID'),
            'options' => [
                'host' => env('REVERB_HOST'),
                'port' => env('REVERB_PORT', 443),
                'scheme' => env('REVERB_SCHEME', 'https'),
                'useTLS' => env('REVERB_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

        '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'),
                'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                'port' => env('PUSHER_PORT', 6001),
                'scheme' => env('PUSHER_SCHEME', 'https'),
                'encrypted' => true,
                'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
            ],
            'client_options' => [
                // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
            ],
        ],

        'ably' => [
            'driver' => 'ably',
            'key' => env('ABLY_KEY'),
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

这是我的 echo.ts

import Echo from "laravel-echo";
import Pusher from "pusher-js";
//@ts-ignore
window.Pusher = Pusher;

const echo  = new Echo({
    broadcaster: 'reverb',
    key: "knycnmdeg1hemq2vnt1i",
    wsHost: "localhost",
    wsPort: 8080,
    wssPort: 8080,
    forceTLS: 'http',
    enabledTransports: ['ws', 'wss'],
});

export default echo;

我尝试安装各种软件包，但没有一个对我有用。你能帮我解决这个问题吗？

Answer 1

我目前在混响和 nextjs 上也遇到同样的问题