How to Add Real-Time Comments in Laravel 11 with Laravel Reverb
In this guide, we will create a real-time commenting system for a Laravel 11 application. This system will enable users to see and post comments instantly, without needing to refresh the page. By integrating Laravel Echo, Laravel Reverb, and Pusher, we will ensure that comment updates are broadcasted in real time.
What is Laravel Reverb?
Laravel Reverb is a broadcasting driver designed for real-time communication in Laravel applications. It allows users to receive updates instantly as they occur. With Reverb, you can handle real-time notifications, chat messages, and other dynamic interactions. This tutorial will show you how to set up and configure Laravel Reverb to enable real-time commenting functionality in your Laravel application.
What We Will Do
Install Laravel 11: set up a new Laravel project.
Set Up Authentication: Use Laravel UI to scaffold authentication.
Create the Comment System: Implement controllers, routes, and the necessary logic for handling comments.
Install and Configure Laravel Reverb: Set up Laravel Reverb for real-time broadcasting.
Set up Broadcasting: Configure broadcasting with events and channels.
Install and Configure laravel-echo pusher-js: Set up Pusher as an alternative or additional broadcasting driver.
Create Blade Templates: Design the front-end to display and submit comments.
Configure JavaScript for Echo: Handle real-time updates on the client side.
1. Installing Laravel 11
To start, we need to install Laravel 11. Use Composer to create a new Laravel project by using the following code:
Navigate to the project directory by using the following code:
cd laravel-realtime-comments
2. Setting Up Authentication with Laravel UI
Authentication is animportant part of any application, and Laravel UI makes it easy to set up. We'll use Laravel UI to generate the necessary views and routes for user authentication.
Install Laravel UI by using the following code:
composer require laravel/ui
Generate the authentication scaffolding using Bootstrap:
php artisan ui bootstrap --auth
Lastly install the npm dependencies and compile the assets:
npm install && npm run dev
With authentication set up, users can now register, log in, and log out, which is necessary for identifying who is posting the comments.
3. Creating the Comment System
Comment Controller
We need to create a controller to handle the storage and retrieval of comments. This controller will manage the logic for saving comments to the database and broadcasting them in real-time. To create the comment controller use the following code.
php artisan make:controller CommentController
Edit app/Http/Controllers/CommentController.php to include:
Edit app/Http/Controllers/CommentController.php to include the following methods:
namespace App\Http\Controllers;
use App\Events\CommentPosted;
use App\Models\Post;
use Illuminate\Http\Request;
class CommentController extends Controller
{
public function store(Request $request, Post $post)
{
$validated = $request->validate([
'comment' => 'required|string|max:255',
]);
$validated['user_id'] = auth()->user()->id;
$comment = $post->comments()->create($validated);
broadcast(new CommentPosted($comment))->toOthers();
return response()->json([
'status' => 'success',
'message' => 'Comment posted successfully.',
'comment' => $comment,
], 200);
}
public function index(Post $post)
{
$comments = $post->comments()->latest()->get();
return response()->json($comments);
}
}
This comment controllerallows us to handle all aspects of comment management, from storing new comments to retrieving existing ones.
3. Routes
We need to define routes to handle comment-related actions. These routes will connect our controller methods to specific URLs in the application.
These routes allow users to fetch and post comments on specific posts, which is the basis for our real-time commenting system.
4. Installing and Configuring Laravel Reverb
Laravel Reverb is a broadcasting driver designed for real-time communication in Laravel applications. It allows users to receive updates instantly as they occur. We’ll install Reverb along with Laravel Echo, which will be used on the client side to listen for broadcasted events.
Install Laravel Echo and Reverb by using the following code:
php artisan install:broadcasting
.env Configuration
we need to configure the .env file to include Reverb settings. This configuration will tell Laravel to use Reverb for broadcasting events.
Broadcasting events is at the core of any real-time system. We’ll create an event that will be broadcasted whenever a comment is posted.
Generate the CommentPosted event by using the following code:
php artisan make:event CommentPosted
Inside the generated event class, include the necessary properties and the broadcastOn method to define the channel the event will broadcast on. Here’s an example:
namespace App\Events;
use App\Models\Comment;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class CommentPosted implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $comment;
public function __construct(Comment $comment)
{
$this->comment = $comment;
}
public function broadcastOn(): array
{
return [
new PrivateChannel("posts.{$this->comment->post_id}"),
];
}
public function broadcastAs()
{
return 'CommentPosted';
}
/**
* The data to broadcast with the event.
*
* @return array
*/
public function broadcastWith()
{
return [
'id' => $this->comment->id,
'user_id' => $this->comment->user_id,
'comment' => $this->comment->comment,
'created_at' => $this->comment->created_at,
];
}
}
Channels Configuration
To make sure that events are only broadcast to the right users, we’ll configure the broadcast channels in routes/channels.php.
Add the following channel configuration:
Broadcast::channel('posts.{id}', function ($user) {
return true;
});
6. Installing and Configuring Pusher
Pusher is a popular service for managing broadcasting events. While Reverb handles broadcasting within your Laravel application, Pusher can be used as an alternative or additional broadcasting driver.
Install Pusher using npm:
npm install --save laravel-echo pusher-js
7. Blade Template for Comments
We will create a Blade template that displays comments and includes a form for submitting new comments. This template will be responsible for rendering the front-end of our real-time commenting system.
Create a comments.blade.php file in the resources/views directory and add the following content:
This simple template lists all comments and provides a form for adding new ones. When a user submits the form, the comment will be posted in real-time, thanks to the broadcasting we’ve set up.
We will configure the JavaScript to listen for new comments using Laravel Echo. This will make sure that whenever a comment is posted, it appears in real-time for all users viewing the post.
Add the following JavaScript to your resources/js/app.js file:
