Real Time Notification Using Reverb Laravel 11
Laravel Reverb is a broadcasting package for Laravel that provides real-time broadcasting of events via WebSockets technology, providing an alternative to services like Pusher, Socket.io; It can be easily integrated with Laravel Echo, which can handle the client-side event broadcasting, and allows user to push events to the frontend without needing a third-party service like Pusher or Socket.io;
Here in this article I will explain a-z guideline to setup local reverb server as well as create a real small demo project for showing broadcasting message in browser using laravel reverb. A full github repository will be provided at the end of the article. After following the whole article you can clone that repo and check from your machine
Key Features of Laravel Reverb:
- Real-time Broadcasting: It enables real-time updates for Laravel application by broadcasting events that can be received by frontend clients (such as web browsers).
- Self-hosted WebSockets: Unlike Pusher, which is a third-party service, Laravel Reverb allows you to run your own WebSocket server, reduce dependency on external services.
- Compatible with Laravel Echo: It works smoothly with Laravel Echo(javascript library), which provides a simple API for handling WebSocket events in the frontend using libraries like Socket.io, pusher-js
- No Additional Fees: Since you're hosting the own WebSocket server, there is no external cost associated with broadcasting events, unlike Pusher, which has charges.
Install Laravel Version 11
You should install laravel latest version as well as other dependencies as well
composer create-project --prefer-dist laravel/laravel laravel11-reverb
Install Necessary Node.js Packages
For connecting to reverb socket server from browser , it needs to have installed laravel-echo and pusher-js packages. You may be confused why pusher-js is required. Answer is reverb can easily use pusher javascript library
npm install laravel-echo pusher-js toastify-js
Install Breeze Composer Dependency
Laravel breeze is a simple ui starter kit for authentication and frontend. It uses modern tailwind css for making nice and eye catching frontend UI. You can also use other frontend library according to need
composer require laravel/breeze --dev
php artisan breeze:install
Install Tailwind CSS
npm i @tailwindcss/forms
Build Asset
One terminal in root directory and run below command. This command will compile all of your js and css into one file. After that browser will refresh automatically if any changes occured
npm run build
Define Routes
We need to create some routes for project to view and insert data
Route::get('/', function () {
