локальная разработка

1. Создаем новый проект с Vue.js https://dvkuklin.ru/laravel/laravel-vue

2. Устанавливаем Reverb https://laravel.su/docs/10.x/reverb
composer require laravel/reverb
php artisan reverb:install

3. В .env должно автоматом появиться

BROADCAST_DRIVER=reverb

REVERB_APP_ID=2345345
REVERB_APP_KEY=кпырыук
REVERB_APP_SECRET=ывкарукр
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}"

4. Запуск Reverb
php artisan reverb:start --debug

5. Создаем событие
php artisan make:event TestEvent

<?php

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 TestEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('channel-name'),
        ];
    }
}

6. В routes/api.php для запуска события в Postman

Route::get('/start-event', function (Request $request) {
    event(new \App\Events\TestEvent(['data'=>'data']));
    return "ok";
});

7. Настроить работу очередей https://dvkuklin.ru/laravel/queue
php artisan queue:table
php artisan migrate
php artisan queue:listen

8.Установить зависимости

npm install --save-dev laravel-echo pusher-js

9. В resources/js/app.js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
  broadcaster: 'reverb',
  key: import.meta.env.VITE_REVERB_APP_KEY,
  wsHost: import.meta.env.VITE_REVERB_HOST,
  wsPort: import.meta.env.VITE_REVERB_PORT,
  wssPort: import.meta.env.VITE_REVERB_PORT,
  forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
  enabledTransports: ['ws', 'wss'],
});

window.Echo.channel(`channel-name`)
    .listen('TestEvent', (e) => {
        console.log("Пришло событие");
        console.log(e);
    });