使用Reverb＆Vue將實時聊天添加到Laravel

什麼是Laravel Reverb？ Reverb充當您的Laravel應用程序與其用戶之間的橋樑，實現通過Websocket的雙向實時通信。這允許無需全頁重新加載即可進行動態更新，從而創建更敏感的用戶體驗。 Laravel Reverb的關鍵特徵

高性能：

為實時數據傳輸提供了出色的速度。

可伸縮性：輕鬆處理增長的用戶基礎並增加流量。 > >

易於集成：與Laravel的廣播和Laravel Echo無縫合作，以回波用於簡化的開發。 >

• 即時更新：推送更新，消息和事件立即向客戶端。
• 魯棒安全：包括安全通信的數據加密和身份驗證。
• >>用Laravel Reverb
構建實時聊天應用程序
• 本指南演示了使用Reverb創建動態聊天應用程序。消息立即交付，確保用戶體驗。 > >
>步驟1：設置您的Laravel項目
• >
>確保您有Laravel應用程序（建議使用11版或更高版本）。 使用

作為一個新項目。

>

>步驟2：安裝和配置Reverb

>

>使用：安裝混響

在

中配置Reverb並設置以下環境變量：>
• 也將自動生成composer create-project laravel/laravel your-chat-app-name
文件（位於

>中）。 有關服務器特定配置。請參閱Laravel Documentation（

https://www.php.cn/link/865E434F7F4F4F4F4E0E0E0E0E0E0E0E0E0E0E0E0E0E0E938B06809） >

步驟3：運行Reverb Server

php artisan install:broadcasting

>使用以下方式啟動Reverb服務器

config/reverb.php（使用

和

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

>選項或環境變量

和echo.js>用於自定義配置。）resources/js 步驟4：數據庫設置

>在文件中配置數據庫。 （使用sqlite示例）：

創建數據庫文件：

php artisan reverb:start

此示例使用五個預定義的聊天室。 創建--host模型和遷移：--port

php artisan install:broadcasting

遷移（database/migrations/*.php）應包括：

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

運行遷移：php artisan migrate

>

>將關係添加到ChatMessage>模型（app/Models/ChatMessage.php）：>

php artisan reverb:start

>

步驟5：創建>事件MessageSent>

創建事件

（MessageSent）：app/Events/MessageSent.php>

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

>

步驟6：創建一個私人通道路由>

在

中定義私人頻道：routes/channels.php

php artisan make:model ChatMessage --migration

>

步驟7：定義路由>

在

>中定義必要的路由：routes/web.php

• 聊天室路線：

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

• 獲取聊天消息路由：

  <?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');
      }
  }

• 發送聊天消息路由：

  <?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}"),
          ];
      }
  }

步驟8：創建刀片視圖（）resources/views/chat.blade.php>

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

步驟9：創建vue.js component（）resources/js/components/ChatComponent.vue

（vue.js組件代碼在原始提示

>

步驟10：運行項目

run

，

和php artisan serve。 npm run dev> php artisan reverb:start源代碼：

（原始提示中提供的鏈接）

> 這項詳細的演練提供了使用Laravel Reverb和vue.js構建實時聊天應用程序的綜合指南。 請記住調整路徑和配置以匹配您的項目設置。

以上是使用Reverb＆Vue將實時聊天添加到Laravel的詳細內容。更多資訊請關注PHP中文網其他相關文章！