Adding Real Time Chat to Laravel Using Reverb & Vue

Laravel, a popular PHP framework, gains enhanced real-time capabilities with Reverb, a powerful WebSocket server. This official Laravel package simplifies the integration of real-time features, significantly improving user interaction.

What is Laravel Reverb?

Reverb acts as a bridge between your Laravel application and its users, enabling bidirectional, real-time communication via WebSockets. This allows for dynamic updates without full page reloads, creating a more responsive user experience.

Key Features of Laravel Reverb:

• High Performance: Delivers exceptional speed for real-time data transfer.
• Scalability: Easily handles growing user bases and increased traffic.
• Easy Integration: Seamlessly works with Laravel's broadcasting and Laravel Echo for streamlined development.
• Instant Updates: Push updates, messages, and events to clients instantly.
• Robust Security: Includes data encryption and authentication for secure communication.

Building a Real-time Chat Application with Laravel Reverb

This guide demonstrates creating a dynamic chat application using Reverb. Messages are delivered instantly, ensuring a fluid user experience.

Step 1: Setting up Your Laravel Project

• Ensure you have a Laravel application (version 11 or higher recommended). Use composer create-project laravel/laravel your-chat-app-name for a new project.

Step 2: Install and Configure Reverb

Install Reverb using:

php artisan install:broadcasting

Configure Reverb in config/reverb.php and set the following environment variables:

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

The echo.js file (located in resources/js) will also be automatically generated. Refer to the Laravel documentation (https://www.php.cn/link/865e434f7f48e0e93f69cbb938b06809) for server-specific configuration.

Step 3: Running the Reverb Server

Start the Reverb server with:

php artisan reverb:start

(Use --host and --port options or environment variables REVERB_SERVER_HOST and REVERB_SERVER_PORT for custom configurations.)

Step 4: Database Setup

Configure your database in the .env file. (Example using SQLite):

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Create the database file: touch /path/to/database.sqlite

This example uses five predefined chat rooms. Create a ChatMessage model and migration:

php artisan install:broadcasting

The migration (database/migrations/*.php) should include:

<code>BROADCAST_DRIVER=reverb
REVERB_APP_ID=my-app-id
REVERB_APP_KEY=my-app-key
REVERB_APP_SECRET=my-app-secret</code>

Run the migration: php artisan migrate

Add relationships to the ChatMessage model (app/Models/ChatMessage.php):

php artisan reverb:start

Step 5: Create the MessageSent Event

Create the event MessageSent (app/Events/MessageSent.php):

<code>DB_CONNECTION=sqlite
DB_DATABASE=/path/to/database.sqlite</code>

Step 6: Create a Private Channel Route

Define the private channel in routes/channels.php:

php artisan make:model ChatMessage --migration

Step 7: Define Routes

Define the necessary routes in routes/web.php:

• Chat Room Route:

  Schema::create('chat_messages', function (Blueprint $table) {
      $table->id();
      $table->foreignId('receiver_id');
      $table->foreignId('sender_id');
      $table->text('text');
      $table->timestamps();
  });

• Get Chat Messages Route:

  <?php
  
  namespace App\Models;
  
  use Illuminate\Database\Eloquent\Model;
  use Illuminate\Database\Eloquent\Factories\HasFactory;
  
  class ChatMessage extends Model
  {
      use HasFactory;
  
      protected $fillable = ['sender_id', 'receiver_id', 'text'];
  
      public function sender()
      {
          return $this->belongsTo(User::class, 'sender_id');
      }
  
      public function receiver()
      {
          return $this->belongsTo(User::class, 'receiver_id');
      }
  }

• Send Chat Message Route:

  <?php
  
  namespace App\Events;
  
  use App\Models\ChatMessage;
  use Illuminate\Broadcasting\InteractsWithSockets;
  use Illuminate\Broadcasting\PrivateChannel;
  use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
  use Illuminate\Foundation\Events\Dispatchable;
  use Illuminate\Queue\SerializesModels;
  
  class MessageSent implements ShouldBroadcastNow
  {
      use Dispatchable, InteractsWithSockets, SerializesModels;
  
      public function __construct(public ChatMessage $message) {}
  
      public function broadcastOn(): array
      {
          return [
              new PrivateChannel("chat.{$this->message->receiver_id}"),
          ];
      }
  }

Step 8: Create the Blade View (resources/views/chat.blade.php)

Broadcast::channel('chat.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Step 9: Create the Vue.js Component (resources/js/components/ChatComponent.vue)

(Vue.js component code provided in the original prompt)

Step 10: Run the Project

Run php artisan serve, npm run dev, and php artisan reverb:start.

Source Code: (Link provided in the original prompt)

This detailed walkthrough provides a comprehensive guide to building a real-time chat application using Laravel Reverb and Vue.js. Remember to adjust paths and configurations to match your project setup.

The above is the detailed content of Adding Real Time Chat to Laravel Using Reverb & Vue. For more information, please follow other related articles on the PHP Chinese website!