Laravel Reverb Presentation

Introduction

• Laravel Reverb is a first-party WebSocket server for Laravel applications, now at version 1.0.
• Reverb allows for real-time access for users across the application server.
• The presentation involves building a Laravel Reverb application from scratch.
• Main features include real-time user interactions, such as mouse movements and toggling switches.

Tools and Technologies

• Laravel: PHP framework for building web applications.
• Livewire: Framework for building dynamic interfaces using Laravel and Alpine.js.
• Volt: Class-based Livewire API.
• Laravel Echo: WebSocket extension for Laravel.
• Alpine.js: Lightweight JavaScript framework for reactive data handling.
• SQLite: Database used for storing data during development.
• Laravel Herd: Tool for local development, also supports Reverb server.
• FontAwesome: For graphical elements (like the cursor effect).

Setup and Installation

1. Creating New Laravel Project:
   • laravel new build-reverb-with-me (starter kit for Laravel and Livewire).
   • Setup SQLite database, run migrations.
   • Open project in VS Code and initialize Git repository.
   • Run local development server: npm run dev.
2. Scaffolding Livewire Component:
   • Remove unnecessary routes (authentication routes not needed).
   • Rename welcome.blade.php to home.blade.php and set up in web routes.
   • Create a Livewire component for a toggle switch: php artisan make:volt toggle.
   • Set up a basic toggle switch in Livewire and Alpine.js.

Building the Application

Initial Setup

• Set up local state in Alpine.js and bind it to Livewire state.
• Toggle switch syncs locally and then updates the server.

Installing Laravel Reverb

• Installation: php artisan install broadcasting.
• Set up environment variables for Reverb in .env file.
• Start the Reverb server: php artisan reverb:start.
• Make sure Laravel Echo is set up correctly in the project.

Creating an Event for Toggle Switching

• Generate an event using Artisan: php artisan make:event SwitchFlipped.
• Implement ShouldBroadcastNow in the event class.
• Broadcast event to a specific channel and sync client state changes via Livewire.

Real-Time Cursor Display

• Integrate third-party cursor effect using a JavaScript library.
• Create a new JavaScript file (magic-mouse.js) for the cursor effect.
• Import and set up necessary CSS and JS dependencies in bootstrap.js.
• Modify cursor effect to be relative to the center of the screen.
• Broadcast cursor position data to the server using Livewire and display it in real-time.

Monitoring Active Users

• Add feature to track and display the number of active users in real-time.

Advanced Features

• Implemented smooth cursor movement using the request animation frame for better UX.
• Deployed to Laravel Forge for real-time deployment.
• Set up environment for production including necessary DNS settings for Reverb.

Summary

• Demonstrated how to build a real-time web application using Laravel, Livewire, Alpine.js, and Laravel Reverb.
• Showcased the ability to track user interactions and update the client in real-time.