Laravel-Echo 不听

问：

我使用 laravel 9。

我正在尝试在我的项目中创建实时聊天。但是 laravel-echo 不听我的事件。当 Im 在命令中运行时，该事件会触发并出现。queue:work

我使用数据库来运行我的队列作业。

这是我的ChatEvent.php

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

    public $data;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $this->data = $data;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn(): Channel
    {
        return new Channel('chat.1');
    }

    public function broadcastAs(): string
    {
        return 'chat-event';
    }
}

这是我的频道.php

Broadcast::channel('chat.1', function () {
    return true;
});

这是我的聊天控制器.php

class ChatController extends Controller
{
    public function sendMessage(Request $request)
    {        
        $data = $this->storeMessage($request);
        event(new ChatEvent($data));
        
        return response()->json(['success' => true, 'message'=>$data->contents, 'created_by'=> carbon($data->created_by)->format('g:i A')]);
    }
}

这是我在chat.blade.php中的监听代码

    <script>
        window.Echo.channel('chat.1')
        .listen('.chat-event', (e) => {
            console.log(e)
            //code for html
        });
        $("#send-message").on('click', function(e){
            e.preventDefault();
            var _token = $("input[name='_token']").val();
            var sender = $("input[name='sender']").val();
            var receiver = $("input[name='receiver']").val();
            var task = $("input[name='task']").val();
            var message = $("#chat").val();
            if(message != ''){
                $.ajax({
                    type: "POST",
                    url: '{!! route("sendMessage") !!}',
                    dataType: "json",
                    data: {'_token':_token, 'message':message, 'sender':sender, 'receiver':receiver, 'task':task},
                    success:function(data) {
                        //code in html
                    }
                });
            }
        })
    </script>   

这是我的引导.js

import Echo from 'laravel-echo';
import PusherJS from 'pusher-js';
// import io from 'socket.io-client';

let client = new PusherJS('app-key', {
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    encrypted: true,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    wssPort: import.meta.env.VITE_PUSHER_PORT
});
window.PusherClient = client;

window.Echo = new Echo({
    // broadcaster: "socket.io",
    // host: import.meta.env.MIX_APP_URL + ":6001",
    broadcaster: "pusher",
    client: window.PusherClient,
});

最后，我的 .env

PUSHER_APP_ID=secret-id
PUSHER_APP_KEY=secret-key
PUSHER_APP_SECRET=secret-secret
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=ap1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

这是我的laravel-echo-server启动

这是我的 redis-cli 监视器

这是我的数据库.php

'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            // 'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
            'prefix' => '',
        ],

我希望侦听器跳跳并运行脚本。但只有事件被触发。不是回声