Laravel Real-Time Using Reverb ⚡️

Welcome — this monorepo contains four concise Laravel examples that demonstrate building production-minded real-time features using Laravel events, broadcasting, and the official Laravel Reverb WebSocket broadcaster.

Each example is self-contained and maps to a video in the companion "Laravel Real-Time" playlist. The included PowerPoint (Real-Time-in-Laravel.pptx) contains the slides used across the videos and serves as an additional quick reference (definitions, architecture diagrams, and installation steps).

What you'll learn ✨

• What "real-time" means and why it makes web applications feel more responsive and engaging
• How Laravel events, broadcasters, and Laravel Echo collaborate to deliver realtime updates
• How to install and configure Laravel Reverb (official WebSocket broadcaster)
• Practical, copy-pasteable examples: global reactions, registration notifications, per-user post notifications, and a Livewire chat

Why choose Reverb? 🚀

• Official: developed for Laravel and fully supported in the ecosystem
• Free & lightweight: easy to run locally and in production
• Integrates cleanly with events, channels, and Laravel Echo on the frontend

Quick install:

php artisan install:broadcasting
php artisan reverb:start

Playlist & Videos 🎬

This repository is a companion to the "Laravel Real-Time" playlist. Below are the five videos referenced across the examples:

#	Title	Link
0	Introduction & How to Install	https://youtu.be/jtaTEpptBSI
1	Example 1 — Global Reactions	https://youtu.be/yWjK65j4_X0
2	Example 2 — User Registration Notification	https://youtu.be/EXSIC4nFlBA
3	Example 3 — Posts / Notifications System	https://youtu.be/XfvkzrHYV0Y
4	Example 4 — Chat System (Livewire)	https://youtu.be/nv-4Hb0mIT8

Full playlist: https://www.youtube.com/playlist?list=PLBy71Vfd0SzVK6NKX1Z5YB7mCPau6EtyU

Note: the presentation Real-Time-in-Laravel.pptx is included as a reference (slides contain definitions, workflows, and code snippets).

Repository layout 📁

CODE/
├─ ChatterFlow/                      # Example 4 — Livewire chat (Livewire + Echo)
├─ GlobalReaction/                   # Example 1 — Global reactions (public channel)
├─ PostNotification/                 # Example 3 — Posts & per-user notifications (private channels)
├─ UserRegisterationNotification/    # Example 2 — User registration toasts (private channel)
├─ Real-Time-in-Laravel.pptx         # Presentation slides used in the playlist

Short description of each project

• GlobalReaction — Example 1

  • A global reaction system (wave, fire, heart, joy) broadcast to all connected clients. Demonstrates broadcasting to a public channel and listening with Laravel Echo.

• UserRegisterationNotification — Example 2

  • Broadcasts a UserRegistered event to authenticated clients on a private channel to show instant toasts when new users register.

• PostNotification — Example 3

  • Per-user notifications for posts, likes, and comments. Notifications are persisted to the DB and broadcast on private notifications.{userId} channels.

• ChatterFlow — Example 4

  • A Livewire-based 1:1 chat system using private chat.{userId} channels, message broadcasting, and read receipts. Shows how to bind Echo events into Livewire components.

How real-time works (high level) 🔁

1. The browser (client) establishes a WebSocket connection to the broadcaster using Laravel Echo.
2. When a server-side action occurs (e.g. MessageSent, ReactionSent), Laravel fires an event that implements ShouldBroadcast.
3. The broadcaster (Reverb) receives the event and forwards it to subscribed clients.
4. Frontend listeners update the UI immediately, without a full page refresh.

Analogy: HTTP is like sending letters (request → response). WebSockets are like a phone call — a persistent, two-way channel where the server can proactively push updates.

Install & run (quickstart) 🧭

1. Clone and pick an example:

git clone https://github.com/Abdogoda/LARAVEL-REALTIME.git
cd GlobalReaction

2. Install PHP & JS dependencies:

composer install
npm install

3. Configure environment and migrate:

cp .env.example .env
php artisan key:generate
php artisan migrate

4. Add broadcasting support and configure Reverb:

php artisan install:broadcasting
# update .env with REVERB_* values (see below)

Example .env values:

BROADCAST_DRIVER=reverb
REVERB_APP_KEY=your_app_key
REVERB_APP_SECRET=your_app_secret
REVERB_APP_ID=your_app_id
REVERB_HOST=127.0.0.1
REVERB_PORT=8080
REVERB_SCHEME=http

# Vite / Echo envs (prefix with VITE_ so import.meta.env picks them up)
VITE_REVERB_APP_KEY=${REVERB_APP_KEY}
VITE_REVERB_HOST=${REVERB_HOST}
VITE_REVERB_PORT=${REVERB_PORT}
VITE_REVERB_SCHEME=${REVERB_SCHEME}

5. Build assets and launch:

npm run dev
php artisan serve
php artisan reverb:start

If you prefer another broadcaster (Pusher, Soketi, Laravel WebSockets), update BROADCAST_DRIVER and the Echo config in resources/js/echo.js accordingly.

📧 Get in Touch

📧 Email: abdogoda0a@gmail.com
🎥 YouTube Channel: Abdulrhman-Goda