I m 提出单独的Laravel 10和Vue3的申请。 我想用拉拉维尔广播开展实时活动,但我会遇到一些问题。

我从前线接通了网页,但我没有看到任何东西,而且当我试图从后台引发事件时,我会发现库勒的错误。

BACKEND LARAVEL

网址: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,
        ],
    ],`

广播。 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  => false,
                 host  =>  127.0.0.1 ,
                 port  => 6001,
                 scheme  =>  http ,
                 useTLS  => false
            ],
        ],

.env (laravel)

BROADCAST_DRIVER=pusher
QUEUE_CONNECTION=sync
PUSHER_APP_ID=local
PUSHER_APP_KEY=local
PUSHER_APP_SECRET=local
PUSHER_APP_CLUSTER=eu
PUSHER_SCHEME=http

in api.php

/**
 * Live EVENTS
 */
Route::get( /test , function () {
    event(new UpdateUser());
});

活动/最新情况

class UpdateUser implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
    }

    public function broadcastWith(): array
    {
        return [ message  =>  Hello, Vue! ];
    }

    public function broadcastOn(): Channel
    {
        return new Channel( userupdate-channel );
    }
}

页: 1

 providers  => ServiceProvider::defaultProviders()->merge([
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        AppProvidersAppServiceProvider::class,
        AppProvidersAuthServiceProvider::class,
        AppProvidersBroadcastServiceProvider::class,
        AppProvidersEventServiceProvider::class,
        AppProvidersRouteServiceProvider::class,
    ])->toArray(),

FRONTEND VUE

.env

VITE_PUSHER_APP_KEY=local
VITE_PUSHER_APP_HOST= 127.0.0.1 
VITE_PUSHER_CLUSTER= eu 

主编js

//Laravel Notifications
import Echo from  laravel-echo 
import Pusher from  pusher-js ;
window.Pusher = Pusher

window.Echo = new Echo({
    broadcaster:  pusher ,
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster:  eu ,
    wsHost: import.meta.env.VITE_PUSHER_APP_HOST,
    wsPort: 6001,
    forceTLS: false,
    encrypted: false,
    disableStats: true,
    enabledTransports: [ ws ],
    //enabledTransports: [ ws ,  wss ],
})

The versions i used: "pusher-js": "^4.3.1", "laravel-echo": "^1.15.3",

前线:

https://i.stack.imgur.com/ipa2q.png” rel=“nofollow noreferer”>。