Как сделать работу Laravel Reverb с использованием Herd?

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Проверка конфигурации среды
Шаг 2: Запуск Reverb
Шаг 3: Проверка подключения к WebSocket
Шаг 4: Проверка события и канала
Шаг 5: Обработка ошибок
Заключение

Вопрос или проблема

Я не могу заставить Laravel Reverb и Echo работать, и не знаю, как это отладить. Я прошел через стандартную установку и просто пытался передать простое сообщение на страницу.

Вот мое Событие:

class TestEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public string $message;

    public function __construct(string $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return [new Channel('test-channel')];
    }
}

Вот команда Artisan для ее отправки:

public function handle()
    {
        TestEvent::dispatch('Это тест');
    }

Это представление:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Echo?</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<h1>Echo?</h1>

<script>
    Echo.channel('test-channel')
        .listen('TestEvent', (e) => {
            console.log('TestEvent resp...');
            console.log(e);
        });
</script>
</body>
</html>

Файл js Echo не был изменен:

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 ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

И Reverb добавил все значения .env, и я их не трогал.

Итак, я подумал, что всё, что мне нужно сделать, это запустить npm run dev, запустить сервер Reverb, вызвать событие, и я должен увидеть вывод console.log. Но ничего. В конце концов, я получаю ошибку ‘websocket не удалось подключиться’.

Я использую Herd для разработки, но не думал, что это важно, так как всё работает через localhost. Я даже проверил, что порт 8080 не используется, и там ничего нет.

У кого-нибудь есть идеи, что может быть не так? Или как я могу это отладить?

Ответ или решение

Для успешной работы Laravel Reverb с Echo через Herd требуется правильная настройка и понимание всех компонентов системы. Ниже приведены основные шаги, которые помогут вам решить проблемы, с которыми вы столкнулись.

Шаг 1: Проверка конфигурации среды

Убедитесь, что все переменные окружения, относящиеся к Reverb, правильно настроены в вашем файле .env. Проверьте следующие параметры:

VITE_REVERB_APP_KEY=ваш_ключ_приложения
VITE_REVERB_HOST=localhost
VITE_REVERB_PORT=3000 # или любая другая порт, который Reverb использует
VITE_REVERB_SCHEME=https # используйте 'http', если вы не настраиваете TLS

Шаг 2: Запуск Reverb

Если вы используете Herd, чтобы запустить сервер Reverb, убедитесь, что сервер действительно работает. Для этого выполните команду в терминале:

npm run reverb

Это должно запустить сервер Reverb, и убедитесь, что в консоли нет ошибок.

Шаг 3: Проверка подключения к WebSocket

Когда ваш сервер Reverb запущен, откройте инструменты разработчика в браузере (обычно это клавиша F12) и перейдите на вкладку "Сеть". Затем обновите страницу с вашим приложением и проверьте, установлено ли соединение WebSocket. Это поможет вам понять, происходит ли какая-либо активность при попытке подключения.

Если вы видите ошибку подключения, убедитесь, что адрес и порт совпадают с теми, что указаны в конфигурации Echo:

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 ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

Шаг 4: Проверка события и канала

Убедитесь, что ваше событие правильно определяется и отправляется на нужный канал. Вы можете использовать Laravel’s artisan команду для тестирования вашего события. Это делается с помощью команды:

php artisan tinker

Затем запустите:

event(new TestEvent('Это тестовое сообщение'));

Если ваш слушатель на стороне клиента работает правильно, вы должны увидеть ваше сообщение в консоли.

Шаг 5: Обработка ошибок

Если ваше приложение по-прежнему не работает, обратите внимание на следующие аспекты:

Консольные ошибки: Всегда обращайте внимание на ошибки в консоли. Они могут указать на проблему с разрешением CORS или неправильные заголовки.
Сертификаты TLS: Если вы используете HTTPS в локальной среде, убедитесь, что у вас есть действительный сертификат TLS, иначе ваше соединение будет отклонено современными браузерами.
Обновления зависимостей: Иногда проблемы могут возникнуть из-за устаревших пакетов. Попробуйте выполнить команду npm update, чтобы обеспечить актуальность всех зависимостей.

Заключение

Debugging веб-сокетов и событий в реальном времени может быть сложным процессом, требующим внимания к деталям. Следуя вышеуказанным шагам, вы сможете идентифицировать и устранить большинство распространенных проблем с подключением Laravel Reverb и Echo, использующими Herd. Если проблема сохраняется, рекомендуется обратиться к документации или сообществу Laravel для получения дополнительной поддержки.