Создайте веб-приложение в режиме реального времени с помощью Laravel Reverb - ПОЛНОЕ РУКОВОДСТВО (Laravel, Livewire, Alpine и многое другое)

• Laravel Reverb - сторонний сервер websocket для Laravel.  

• Позволяет создавать приложения в режиме реального времени.  

• Видео будет посвящено созданию приложения с использованием Laravel Reverb.  

• Приложение позволит пользователям видеть мышь друг друга на экране.  

• Пользователи смогут включать и выключать переключатель.  

• В правом нижнем углу будет отображаться количество активных пользователей.  

• Создание нового проекта Laravel с использованием Livewire.  

• Инициализация репозитория Git и базы данных SQLite.  

• Запуск сервера разработки с помощью npm run dev.  

• Удаление ненужных маршрутов и настройка компонента Livewire Volt.  

• Создание нового компонента Livewire для управления переключателем.  

• Настройка локального состояния компонента и его привязка к Livewire.  

• Установка Laravel Reverb для прослушивания и отправки событий.  

• Использование Laravel Echo для работы с websocket.  

• Настройка соединения с учетными данными приложения и запуск сервера Reverb.  

• Создаем событие для прослушивания изменений переключателя.  

• Событие должно транслироваться немедленно, используя should broadcast now.  

• Передаем переменную toggle switch в конструктор.  

• Создаем канал для трансляции событий.  

• Метод broadcastwith устанавливает значение toggle switch в экземпляре события.  

• Событие транслируется на канале switch.  

• Устанавливаем начальное значение toggle switch в false.  

• Используем кэш для хранения значения toggle switch.  

• Обновляем кэш при каждом переключении переключателя.  

• Используем Alpine.js для локального переключения переключателя.  

• Вызываем метод livewire при изменении состояния переключателя.  

• Это позволяет создать оптимистичный пользовательский интерфейс.  

• Проверяем, что кэш работает правильно.  

• Убеждаемся, что реверберация настроена правильно.  

• Обсуждаем альтернативные методы для обновления состояния в режиме реального времени.  

• Рассматриваем возможность использования Laravel reverb для обновления в режиме реального времени.  

• Обсуждаем недостатки обновления каждые 500 миллисекунд.  

• Возвращаемся к использованию кэша для обновления состояния.  

• Laravel Livewire позволяет легко обрабатывать события.  

• Для прослушивания событий используется атрибут "on".  

• Пример: прослушивание события "щелчок переключателя" и обновление значения переключателя.  

• Проверка работы кода и устранение неполадок.  

• Использование атрибутов livewire для обновления параметров.  

• Проверка работы приложения в реальном времени.  

• Применение Laravel Livewire для создания более продвинутых методов.  

• Пример: отображение курсора пользователя на экране.  

• Использование технологий Alpine и Livewire для определения положения курсора.  

• Использование Canva для создания эффекта падающей звезды.  

• Импорт JavaScript и CSS для реализации эффекта.  

• Настройка шрифтов и импорт необходимых файлов.  

• Определение местоположения пользователя на странице.  

• Использование уникального идентификатора пользователя.  

• Добавление идентификатора пользователя в сеанс.  

• Создание массива положений мыши.  

• Привязка координат мыши к данным Alpine.  

• Отображение курсора на экране с использованием координат x и y.  

• Определение высоты и ширины видового экрана.  

• Установка центра курсора относительно страницы.  

• Абсолютное и относительное положение курсора на экране.  

• Рассчитываем относительное положение курсора относительно центра экрана.  

• Используем координаты x и y для определения абсолютного и относительного положения.  

• Обновляем последнее положение мыши на основе абсолютного положения.  

• Создаем звезду для абсолютного положения курсора.  

• Переносим данные о курсоре на первую страницу.  

• Определяем относительное положение курсора для каждого пользователя.  

• Проверяем, активна ли страница.  

• Настраиваем широковещательную позицию для курсора.  

• Форматируем данные с помощью TypeScript и JavaScript.  

• Находим элемент с идентификатором проводника.  

• Определяем его относительное положение и последнюю позицию трансляции.  

• Форматируем и отображаем курсор на странице.  

• Создаем метод перемещения мыши для отправки относительного положения.  

• Отображаем курсор на странице с помощью шаблона.  

• Исправляем ошибки в отображении курсора.  

• Создаем полезную нагрузку для каждого пользователя.  

• Присваиваем идентификатору пользователя и позиции мыши.  

• Генерируем случайный цвет для каждого пользователя.  

• Переносим полезную нагрузку на новое событие.  

• Создаем событие для перемещения мыши.  

• Настраиваем идентификатор пользователя, позицию и цвет в конструкторе.  

• Создаем канал для трансляции движения мыши.  

• Устанавливаем полезную нагрузку для отображения координат x и y на странице.  

• Отображаем координаты x и y на странице для каждого пользователя.  

• Создание общедоступной функции для регистрации движения мыши.  

• Использование полезной нагрузки для установки положения мыши.  

• Проверка и обработка ошибок при регистрации событий.  

• Использование shouldBroadcast для трансляции событий.  

• Установка позиции мыши на основе полезной нагрузки.  

• Проверка и установка цвета пользователя в соответствии с полезной нагрузкой.  

• Создание функции для подсчета активных пользователей.  

• Обновление количества активных пользователей при перемещении мыши.  

• Отображение курсоров на экране и подсчет активных пользователей.  

• Использование JavaScript для удаления неактивных пользователей.  

• Настройка изменения видимости страницы для определения активности.  

• Удаление пользователя из списка активных на основе JavaScript.  

• Использование JavaScript для сглаживания движения курсора.  

• Установка переменной smoothCursor и анимация курсоров.  

• Тестирование плавности движения курсора в разных браузерах.  

• Настройка CSS для отображения курсора.  

• Развертывание приложения в Laravel Forge.  

• Использование репозитория GitHub для развертывания.  

• Установка зависимостей composer и запуск npm install, npm run dev.  

• Настройка записей DNS для реверберации.  

• Проверка работы приложения в режиме реального времени.  

• Добавление необходимых компонентов composer и запуск сборки npm run build.  

• Включение реверберации в Laravel.  

• Настройка сервера для работы с 1000 одновременных подключений.  

• Использование Level Forge для упрощения задачи.  

• Настройка сценария развертывания для перезапуска реверберации.  

• Создание демона на сервере для запуска реверберации.  

• Развертывание и запуск приложения в Safari.  

• Демонстрация работы в режиме реального времени.  

• Обзор возможностей websockets, Laravel, echo и broadcasting.