Reverb＆Vueを使用してLaravelにリアルタイムチャットを追加する

人気のあるPHPフレームワークである

Laravelは、強力なWebsocketサーバーであるReverbを使用してリアルタイム機能を強化します。 この公式Laravelパッケージは、リアルタイム機能の統合を簡素化し、ユーザーの相互作用を大幅に改善します。

laravelリバーブとは？ ​​

リバーブは、Laravelアプリケーションとそのユーザーの間のブリッジとして機能し、WebSocketsを介した双方向のリアルタイム通信を可能にします。これにより、フルページのリロードなしで動的な更新が可能になり、より応答性の高いユーザーエクスペリエンスが作成されます。 Laravel Reverbの重要な機能：

高パフォーマンス：

リアルタイムのデータ転送に特別な速度を届けます

• スケーラビリティ：成長するユーザーベースとトラフィックの増加を簡単に処理します
簡単な統合：
• ララヴェルの放送とララヴェルエコーとシームレスに連携して、合理化された開発。 インスタントアップデート：
アップデート、メッセージ、イベントをクライアントに即座にプッシュします。
• 堅牢なセキュリティ：安全な通信のためのデータ暗号化と認証を含めます。
• Laravel Reverbを使用したリアルタイムチャットアプリケーションを構築します
このガイドは、リバーブを使用した動的チャットアプリケーションの作成を示しています。メッセージは即座に配信され、流動的なユーザーエクスペリエンスが確保されます
• ステップ1：Laravelプロジェクトのセットアップ
Laravelアプリケーション（バージョン11以下の推奨）があることを確認してください。 新しいプロジェクトに

を使用してください

ステップ2：リバーブ

をインストールして構成します

：

を使用してリバーブをインストールします リバーブを

に設定し、次の環境変数を設定します。

• composer create-project laravel/laravel your-chat-app-nameファイル（
にあります）も自動的に生成されます。 サーバー固有の構成については、laravelドキュメント（

https://www.php.cn/link/865e434f7f48e0e93f69cbb938b06809

）を参照してください ステップ3：リバーブサーバーの実行

リバーブサーバーを起動してください：

php artisan install:broadcasting

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この例では、5つの事前定義されたチャットルームを使用しています。 REVERB_SERVER_HOSTモデルと移行を作成します：REVERB_SERVER_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

ステップ7：ルートを定義します

php artisan make:model ChatMessage --migration

：

で必要なルートを定義します

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

ステップ9：vue.jsコンポーネント（

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

）

を作成します resources/js/components/ChatComponent.vue（vue.jsコンポーネントコードは、元のプロンプトで提供されています）

ステップ10：プロジェクトを実行します

run、

、および

。php artisan serve npm run devphp artisan reverb:startソースコード：

（元のプロンプトで提供されているリンク）

この詳細なウォークスルーは、Laravel ReverbとVue.JSを使用してリアルタイムチャットアプリケーションを構築するための包括的なガイドを提供します。 プロジェクトのセットアップに一致するようにパスと構成を調整することを忘れないでください。

以上がReverb＆Vueを使用してLaravelにリアルタイムチャットを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。