Adding Real Time Chat to Laravel Using Reverb & Vue

---



Laravel, the web artisan's favorite PHP framework, has just got a whole new powerful tool in its arsenal: Reverb. Among the official packages of Laravel, this WebSocket server application would seamlessly let you integrate real-time features in your Laravel-based applications, thereby taking interaction to a whole new level.


What is Laravel Reverb?




Reverb acts as a mediator between your Laravel-based application and its users. It establishes two-way, real-time communication based on WebSockets technology that allows web pages to receive updates on the server without a complete page refresh. This means that your users experience your application more dynamically and responsively.


Key Features of Laravel Reverb




Blazing Speed: Provides outstanding performance for real-time information with no lags.


Scalability: Grow with your applications to handle increased user traffic.


Seamless Integration: It works with broadcasting features added to Laravel and Laravel Echo to make development simple.


Push Updates: Push updates, messages, or events to clients to share your information instantly.


Built-in Security: Data encryption and authentication assurance for security communication


Adding Laravel Reverb to Your Chat Project




With Laravel Reverb, you can build dynamic chat applications. The messages are posted instantly, making users involved comprehensively. Here's a breakdown of the steps involved:


Step 1: Setting Up Your Laravel Project:






*


Ensure you have a Laravel application set up (version 11 or above is recommended).


*


If you're starting fresh, use composer create-project laravel/laravel your-chat-app-name.






Step 2: Install and Configure Reverb:




Install Laravel Reverb by running the following command:
php artisan install:broadcasting



Once you’ve installed Reverb, you can now modify its configuration from the config/reverb.php file. To establish a connection to Reverb, a set of Reverb “application” credentials must be exchanged between the client and server. These credentials are configured on the server and are used to verify the request from the client. You can define these credentials using the following environment variables:
BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret



It also automatically creates echo.js in the resources/js directory.
import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
broadcaster: 'reverb',
key: import.meta.env.VITE_REVERB_APP_KEY,
wsHost: import.meta.env.VITE_REVERB_HOST,
wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
enabledTransports: ['ws', 'wss'],
});



Follow the Laravel documentation for configuration steps specific to your application server
https://laravel.com/docs/11.x/reverb />

Step 3: Running a Server




You can launch the Reverb server by using the reverb:start Artisan command:
php artisan reverb:start



By default, the Reverb server will be started at 0.0.0.0:8080, which makes it accessible from all network interfaces.


If you want to set a specific host or port, you can use the –host and –port options when starting the server.
php artisan reverb:start --host=127.0.0.1 --port=9000



You can also define REVERB_SERVER_HOST and REVERB_SERVER_PORT environment variables in your application’s .env configuration file.


Step 4: Setup Database




Open your .env file and adjust the settings to set up your database. Here’s an example using SQLite for simplicity:
DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite



You can create an SQLite database by simply running:
touch /path/to/database.sqlite



For this demo, we’ll create five predefined rooms. Let’s start by generating a model ChatMessage with migration for a chat_messages table.
php artisan make:model ChatMessage --migration



To make it simpler, only create name attributes for this model and migrate it.
Schema::create('chat_messages', function (Blueprint $table) {
$table->id();
$table->foreignId('receiver_id');
$table->foreignId('sender_id');
$table->text('text');
$table->timestamps();
});

php artisan migrate



Now, let's add the necessary relationships in the ChatMessage model. Open the ChatMessage.php file in the app/Models directory and update it as follows: