Reverb＆Vueを使用してLaravelにリアルタイムチャットを追加する-PHPチュートリアル-php.cn

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

James Robert Taylor

リリース： 2025-03-06 02:20:08

オリジナル

442 人が閲覧しました

Adding Real Time Chat to Laravel Using Reverb & Vue

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

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

laravelリバーブとは？

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

高パフォーマンス：

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

スケーラビリティ：成長するユーザーベースとトラフィックの増加を簡単に処理します
ララヴェルの放送とララヴェルエコーとシームレスに連携して、合理化された開発。インスタントアップデート：
堅牢なセキュリティ：安全な通信のためのデータ暗号化と認証を含めます。
Laravel Reverbを使用したリアルタイムチャットアプリケーションを構築します
ステップ1：Laravelプロジェクトのセットアップ

を使用してください

ステップ2：リバーブ

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

：

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

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

composer create-project laravel/laravel your-chat-app-nameファイル（

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

ログイン後にコピー

）

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 サイトの他の関連記事を参照してください。