Reverb is a real-time broadcasting and WebSockets solution introduced in Laravel 11. It is an alternative to Pusher, making it easier to handle real-time events like comments, notifications, and chat in a Laravel + Vue.js blog.
In this guide, we will: ✅ Install and configure Reverb in Laravel 11 ✅ Use Vue.js to listen for real-time blog updates
Step 1: Install Laravel 11
If you haven’t already set up Laravel 11, install it using Composer:
composer create-project laravel/laravel blog-project
Navigate to your project folder:
cd blog-project
Step 2: Install Laravel Reverb
Run the following command to install Laravel Reverb:
php artisan reverb:install
This will create a config/reverb.php file for configuration.
Step 3: Configure Reverb
Open your .env file and update the Reverb settings:
REVERB_ENABLED=true
REVERB_HOST=127.0.0.1
REVERB_PORT=6001
Step 4: Start Reverb Server
Run the following command to start the Reverb WebSocket server:
php artisan reverb:start
By default, it runs on port 6001.
Step 5: Set Up Broadcasting in Laravel
1️⃣ In config/broadcasting.php, update the default driver:
'default' => env('BROADCAST_DRIVER', 'reverb'),
2️⃣ Open config/app.php and enable event broadcasting:
'providers' => [
App\Providers\BroadcastServiceProvider::class,
],
3️⃣ Run the migration for the failed_jobs table:
php artisan queue:table
php artisan migrate
4️⃣ Create a new event for real-time blog updates:
php artisan make:event BlogUpdated
Modify the generated event file app/Events/BlogUpdated.php:
use Illuminate\Broadcasting\Channel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class BlogUpdated implements ShouldBroadcast
{
public function __construct(public $blog) {}
public function broadcastOn()
{
return new Channel('blog-updates');
}
}
Step 6: Broadcast Events from Laravel
Whenever a new blog post is created or updated, broadcast an event. Modify app/Http/Controllers/BlogController.php:
use App\Events\BlogUpdated;
use App\Models\Blog;
use Illuminate\Http\Request;
class BlogController extends Controller
{
public function store(Request $request)
{
$blog = Blog::create($request->all());
broadcast(new BlogUpdated($blog))->toOthers();
return response()->json(['message' => 'Blog created successfully!']);
}
}
Step 7: Set Up Vue.js to Listen for Events
1. Install Laravel Echo and Pusher
npm install laravel-echo pusher-js
2. Configure Echo in resources/js/bootstrap.js
Add the following code:
import Echo from "laravel-echo";
import Pusher from "pusher-js";
window.Echo = new Echo({
broadcaster: "pusher",
key: process.env.MIX_PUSHER_APP_KEY,
wsHost: window.location.hostname,
wsPort: 6001,
disableStats: true,
forceTLS: false,
});
3. Create a Vue Component to Listen for Updates
Create a new component BlogUpdates.vue:
<template>
<div>
<h2>Real-Time Blog Updates</h2>
<ul>
<li v-for="blog in blogs" :key="blog.id">{{ blog.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
blogs: [],
};
},
mounted() {
window.Echo.channel("blog-updates").listen("BlogUpdated", (event) => {
this.blogs.push(event.blog);
});
},
};
</script>
4. Register the Component in app.js
Open resources/js/app.js and add:
import { createApp } from "vue";
import BlogUpdates from "./components/BlogUpdates.vue";
const app = createApp({});
app.component("blog-updates", BlogUpdates);
app.mount("#app");
5. Add the Component to resources/views/welcome.blade.php
<div id="app">
<blog-updates></blog-updates>
</div>
<script src="{{ mix('js/app.js') }}"></script>
Step 8: Test the Real-Time Blog Updates
1️⃣ Run your Laravel development server:
php artisan serve
2️⃣ Start the Reverb WebSocket server:
php artisan reverb:start
3️⃣ Open your Vue.js front end and add a new blog post via Postman or your Laravel app. You should see the new blog post appear in real-time without refreshing.
Auther : Manoj Damor
Check Our website : https://www.techbytework.com/
Check blog website : https://www.fixmycode.in/
Blog link : https://www.fixmycode.in/how-to-set-up-reverb-in-laravel-11-and-vue/
Leave a Reply