使用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中文网其他相关文章！